React基础常识

自定义组件中，render只能渲染一个标签。

要使用JSX语法，必须导入react模块。

render函数中最常用的单标签是fragment标签，因为fragment标签仅仅起到占位作用，不会改变dom结构。

react中，标签绑定事件，一定要注意大小写，如<input onChange = {this.handleInputChange.bind(this)}>。

react中调用变量一定要加{}。

react中循环遍历时一般是对数据使用.map方法，遍历列表时，每一个遍历出来的项一定都要有一个key值。

react中引用class，要写成className，因为react中已经有了class，避免冲突，<label for = ‘myinput‘>要写成<label htmlFor = ‘myinput‘>

React中不允许直接操作this.state，我们要改变它只能通过修改副本，再赋值给this.state的方式进行修改

JSX注释：在普通的JS注释左右加上{ }。

如果不需要对字符串转义，就使用dangerouslySetInnerHTML属性。dangerouslySetInnerHTML={{__html:value}}

如果组件内部的函数需要绑定this指向，最好在construct函数里绑定。

Props, State 与 render 函数

三者关系：

render  函数什么时候执行？

1. 组件第一次渲染的时候，会被默认执行一次。

2. 当state数据发生变更的时候，render函数就会被重新执行一次。

3. 当props数据发生变化的时候，render函数就会被重新执行一次。

React中ref的使用

react中ref的使用：react中操作dom。获取原声标签对应的dom节点。

<button ref={(button)=>{this.buttonElem = button}}></button>

注意：ref写在html标签上获取的是dom节点。写在组件标签上，获取的是组件的js实例。

setState是异步函数。

React中的生命周期函数

Initialization（初始化阶段）：conostructor生命周期函数

=> Mounting（页面挂载阶段）：componentWillMount 组件即将挂载生命周期函数，render组件渲染生命周期函数，compoentDidMount组件已经挂载生命周期函数

=> Updation（更新阶段）：

props：componentWillReceiveProps组件即将接收参数生命周期函数

shouldComponentUpdate组件可以更新生命周期函数

componentWillUpdate组件即将更新生命周期函数

render组件渲染生命周期函数

componentDidUpdate组件更新完毕生命周期函数

states：shouldComponentUpdate组件可以更新生命周期函数

         componentWillUpdate组件即将更新生命周期函数

         render组件渲染生命周期函数

         componentDidUpdate组件更新完毕生命周期函数

=> Unmounting(程序销毁阶段)：componentWillUnmount组件即将卸载生命周期函数

React基础常识

原文：https://www.cnblogs.com/JianXin1994/p/11958946.html