一、 组件化开发
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>