React 前端开发 (1) - 基础概念

JSX (就是 HTML 和 JS 变量混编)

HTML 本身可以指定给 js 变量
使用 {} 可以引用 js 变量
JSX 可以嵌套
HTML 标签属性需要转化为驼峰形式, class 为 js 保留字所以转化为 className

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    const name = "World";
    const app = <div>Hello, {name}</div>;

    return (
      <div dataIndex="0" className="app">
        {app}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

组件

// 函数组件, 参数 props
function Todo(props) {
  return <li>Hello, {props.name}</li>;
}

// 类组件, 属性 this.props
class Todo extends React.Component {
  render() {
    return <li>Hello, {this.props.name}</li>;
  }
}

// 使用组件
<Todo name="" />;

// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"));

State

State 可以允许动态修改数据

在类组件 constructor 中初始化 state, constructor 开始时要调用 super(props);

// 定义
constructor(props) {
  super(props);

  this.state = {
    name: "app"
  };
}

// 使用
render() {
  // 访问数据, this.state.name
}

// 更新
// 错误方式: this.state = {key: value}; 可能会意外覆盖其他内容
// 正确方式: this.setState({key: value}); 会 merge 到 state 中

componentDidMount() {
  this.timer = setTimeout(() => {
    this.setState({
      todoList: todoList
    });
  }, 2000);
}

componentWillUnmount() {
  clearTimeout(this.timer);
}