React官方文档阅读总结

核心概念

• 元素(标签赋给的变量)是React的最小砖块，是创建开销极小的普通对象，它与浏览器的DOM元素不同。React元素是不可变对象。参考
• 组件由元素构成，分为函数组件【函数名首字母大写】和class组件。参考
• class组件里函数this，函数为普通函数时，构造函数要给函数绑定this；函数为箭头函数时，构造函数可省略绑定this，因其自动bind。

# 函数为普通函数
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

# 函数为箭头函数
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = (event) => {
    this.setState({value: event.target.value});
  }

  handleSubmit = (event) => {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

 

• props本质是一个对象。
• state是当前组件状态信息，受控于当前组件，为私有，且当前组件为class组件。参考

1. 初始化state信息时可以赋值(组件构造函数是唯一可以给this.state赋值的地方),但改变state信息用setState方法。
2. props与state更新可能异步，所以如果要用它们的值更新下一个状态，则需要箭头函数或普通函数。
3. state随组件mount而生成，随组件unmount而销毁。

• 元素变量、逻辑与三目运算符要放到花括号中。参考
• 组件间传递key信息时，key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，用其他属性名显式传递这个值。参考