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