初始React – 组件化开发细节

一、 组件化开发

1、整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：

• 我们说过 ReactDOM.render 第一参数是一个HTML原生或者一个组件；
• 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；

2、 在React中，如何封装一个组件呢？
3、这里我们暂时使用类的方式封装组件：

• 定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
• 实现当前组件的render函数
• render当中返回的jsx内容，就是之后React会帮助我们渲染的内容
  

二、数据依赖

1、组件化问题一：数据在哪里定义
（1）在组件中的数据，我们可以分成两类：

• 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容
  不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容
• 参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中

（2）我们可以通过在构造函数中 this.state = {定义的数据}

• 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作
• 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
  

三、事件绑定

1、组件化问题二：事件绑定中的this

• 在类中直接定义一个函数，并且将这个函数绑定到html原生的onClick事件上，当前这个函数的this指向的是谁呢？
• 默认情况下是undefined

2、很奇怪，居然是undefined；

• 因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
• 这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
• 那么在这里发生监听的时候，react给我们的函数绑定的this，默认情况下就是一个undefined；

3、我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this

• 我们就需要在传入函数时，给这个函数直接绑定this
• 类似于下面的写法：

 <button onClick={this.changeText.bind(this)}>改变文本</button>