React基础常识


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

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

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

react中,标签绑定事件,一定要注意大小写,如

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

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

react中引用class,要写成className,因为react中已经有了class,避免冲突,

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节点。

注意: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组件即将卸载生命周期函数