React官方文档

JSX

------------------------------------------
                            JSX 写法
------------------------------------------
const Element = (
    <h1 className="greet">Hello World</h1>
)
------------------------------------------
                            Babel 转译
------------------------------------------
const Element = React.createElement(
    'h1',
  {className: 'greet'},
  'Hello World'
)
------------------------------------------
                            简化后的结构
------------------------------------------
const Element = {
    type: 'h1',
  propz: {
      className: 'greet',
    children: 'Hello World'
  }
}

ReactDOM.render() 渲染组件

React中的绑定事件

• class中绑定this

  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

• 实验性方法

  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }

• 箭头函数(每次渲染 LoggingButton 时都会创建不同的回调函数)

  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }

  深入了解 apply、bind、call 深入了解 construction super 做了什么

状态提升

如果多个子组件需要共享一个state, 可以将多个子组件的state提升到共同的父组件中

代码分割