组件创建、react事件绑定、生命周期、state状态、工作原理、用法

散星寥落
157 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

组件创建

react推出后，由于不用原因出现了三种组件定义的方式：
    函数的定义的无状态组件
    es5原生方式React createClass定义的组件
    ES6形式的extends React Component定义的组件

目前新推出的组件：
    无状态函数式组件：hook

事件绑定方式

this.handleClick=this.handleClick.bind(this)//构造函数中绑定
<div onClick={this.handleClick.bind(this)}></div>//使用bind绑定
<div onClick={()=>this.handleClick()}></div>//使用arrow function方式绑定

生命周期

实例化期（创建）——存在期（运行）——销毁期（垃圾回收机制回收）

1.png

2.png

getDefaultProps：获得属性，自动创建执行，只执行一次。默认值为空
getInitialState:属性，自动创建执行，可以修改。默认值为空
componentWillMount:组件加载前（生成组件之前）
render：创建虚拟Dom结构（渲染DOM）必须写
componentDidMounte：创建完组件之后执行：动态添加数据写到里面

3.png

4.png

5.png

虚拟DOM：组件不是真实的DOM节点，而是存在内部的一种数据结构

6.png

7.png

8.png

state状态

组件在运行时需要修改的数据就是状态
    组件免不了要与用户互动，React的一大创新就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，
导致状态变化，从而触发重新渲染UI
    this.state是会随着用户互动而产生变化的特性
    React里，只需要更新组件的State，然后根据提前更新的State重新渲染用户界面（不操作DOM）
    我们通过this.state设置state的值
    通过this.setState()设置state的值
    state的作用域只作用在当前类，不污染顶级变量

工作原理

常用的通知React数据变化的方法是调用setState(data,callback),这个方法会合并（merge）data到this.state，
并重新渲染组件，渲染完成后，调用可选的callback回调，大部分情况下不需要提供callback，因为React会负责把界面
更新到最新状态
state：
    state是React中组件的一个对象，React把用户界面当做是状态机，想象他有不同的状态然后渲染这些状态，可以
轻松让用户界面与数据保持一致
    React中，更新组件的state,会导致重新渲染用户界面(不要操作DOM),简单来说,就是用户界面会随着state变化而变化

用法

void setState(function|object nextState,{function callback})
    setState方法通过一个队列机制实现state更新,当执行setState的时候，回将需要更新的state合并之后放入
状态队列，而不会立即执行更新this.state(可以和浏览器的事件队列类比)。如果我们不使用setState而是使用一个
新的对象引用，那么其他不会再对象上的state将不会放入状态队列中，下次调用setState并对状态队列进行合并时，
直接造成了state丢失
    第二个参数是一个回调函数，在setState的异步操作结束并且组件已经重新渲染的时候执行，也就是说，我们可以
通过这个回调函数来拿到更新的state的值
avatar
文章
阅读
粉丝