我理解的React：React 到底是什么？

希望本文能帮助没接触过 React 的同学，对React有个大致的理解。

最重要的写在前面

1. 组件化
2. 数据驱动

什么是组件？组件是对逻辑的封装。对于前端 UI 层来说，组件就是将 UI 封装起来。供任意组装和调用。

1. 写React就是写组件。将一个界面分成若干个组件，组合包装成完整页面
2. 写每一个组件的时候：每个组件有自己的生命周期，在组件不同的周期里做自己想要做的逻辑
3. 子组件接受父组件的参数(Props) 、 以及维护组件内部的状态(State)

最简单的组件 HelloWorld

// HelloWorld.jsx
class HelloWorld extends React.Component {
  componentDidMount () {
    console.log('HelloWorld 第一次挂载到界面上');
  }
  componentWillUnmount () {
    console.log('HelloWorld 即将移除（销毁）');
  }
  render() {
    return (
      <div>Hello World！</div>
    );
  }
}

1. componentDidMount、componentWillUnmount是两个常用的生命周期函数，传送门：[更多生命周期](https://www.runoob.com/react/react-component-life-cycle.html)。
2. render 函数在每次渲染时调用，返回的内容就是组件最终的界面，示例中return 了一个Hello World 的 div。

子组件调用示例

// HelloButton.jsx
class HelloButton extends React.Component {
  render() {
    return (
      <button>我是一个按钮</button>
    );
  }
}

// Wrap.jsx
class Wrap extends React.Component {
  render() {
    return (
      <div>
        <HelloWorld></HelloWorld>
        <HelloButton></HelloButton>
      </div>
    );
  }
}

组件化小结

二、数据驱动

组件的状态 State

// App.jsx 
class App extends React.Component {
  constructor () {
    super()
    this.state = {
      count: 0
    }
  }
  onIncrease = () => {
    this.setState({ count: this.state.count + 1 })
  }
  onDecrease = () => {
    this.setState({ count: this.state.count - 1 })
  }
  render() {
    return (
      <div>
        <div>当前数值：{this.state.count}</div>
        <button onClick={this.onIncrease}>点我-1</button>
        <button onClick={this.onDecrease}>点我+1</button>
      </div>
    );
  }
}

1. constructor方法中，设置了一个 State 属性 ​count​，初始值为 0；
2. 声明了两个方法 ​onIncrease​ 和 ​onDecrease​，方法里对 count 设置了 +-1 的操作；
3. render 函数里渲染了一行文字 + 两个按钮，这里有两个注意点：
4. return里面的内容是 jsx 模板，大括号内的内容是一个 js 变量或者表达式，React 会自动渲染。例如 ​{this.state.count}​ 渲染时就会渲染成count的值
5. 给 button 指定了属性(Props) ​onClick​，即当 button 点击时，会自动调用 指定的函数。

1. 用来直接将 count 显示在界面上；
2. 当接收到点击事件时，改变了 count 这个 State。

父组件传递的属性 Props

// HelloMessage.jsx
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <div>Hello {this.props.username}</div>
      </div>
    );
  }
}

<HelloMessage username="秦书羽" />

数据驱动的理解

1. 界面的渲染，由数据(State和Props)决定，数据变更驱动页面更新；
2. 人机交互(点击、按钮操作等)驱动数据变更，界面根据数据自动更新；
3. 对于开发者，开发一个组件，需要分成两部分：数据 和 视图，再根据用户行为，修改数据即可

数据驱动模式带来的收益

1. 数据和视图分层，逻辑解耦清晰，优雅的多；
2. 人机交互的行为太多、先点哪个按钮、再点哪个按钮，传统开发方式需要判断的东西太多，数据驱动的话，只需要根据当前的数据，修改对应的数据，大大简化；
3. 利于单元测试。

三、总结

1. 在开发模式上，React 给我们带来了 组件化和数据驱动。其内部也基于此做了大量的性能优化；
2. React 是一个基础的 UI 库，作者和社区提供了更多配套，如React-Router(路由)、Redux(全局状态管理)，同学们可以在 React 的理解基础上 向上扩展；
3. 本文都是在讲 React 的 组件化和数据驱动。但我认为不是因为有了 React 才有 组件化和数据驱动，而是先有 组件化和数据驱动 的想法，为了达到这样的设计，最终实现了 React 。本文没有涉及原理，有兴趣的同学可以自行学习。