JSX
setState
生命周期函数
————————————————————
JSX
在js文件中编写Html结构的代码， 就是JSX语法。
自定义的标签，标签名首字母必须大写。
image.png
JSX要求，render函数所返回的内容必须整体包含在一个大的标签中，一般在最外层包含一个div。 如果想不显示这个标签， 又需要用一个标签包裹的话，可以用 Fragment 进行占位
image.png
在一个类中 constructor 构造函数 是优先于其他函数最先执行的一个函数
super 指的是 调用父类的构造函数
image.png
如果想写JSX语法必须引入 react
如果想用fragment 必须引入fragment
image.png
父子组件传值，类型校验
image.png
1.当数据发生变化(state或props)， render函数就会重新执行一次
2.当父组件的render函数重新执行的时候 子组件的render函数也会重新执行
react中的虚拟DOM
image.png
image.png
react中的diff算法用的是同层比对， 如果在第一层就不一样了， 那么直接删除下面所有的， 同层比对相对于其他的算法的速度较快
JSX是一个语法糖，本质是 react.createElement
image.png
setState
1.setState是一个异步函数
本质上是为了提高性能， 比如连续调用三次setState，如果进行三次比对会比较浪费性能，react是将三次合并成一次， 只做一次虚拟DOM的比对，这样就会提高性能
2.由于setState是一个异步函数，所以在手动操作DOM的时候有可能数据还没渲染就打印或者使用了，会导致DOM获取不及时， 这时候可以这样使用:
image.png
this.setstate可以接受第二个参数， 是一个回调函数，这个函数会在setState函数执行以后才去执行， 这样就可以获取到真正的DOM了
为什么在列表循环的时候尽量不要用index作为key值？
是为了提高虚拟DOM对比的性能，在循环中，给每一项添加一个Key值，在DOM比对的时候会根据Key值进行比对，当数据更新对比虚拟DOM时，如果发现这次的Key跟上次一样， 就不改变内容， 如果发现不一样就更新内容，如果用了Index作为key: 比如 有三项 a:0,b:1,c:2 这时如果将a删除了， 那么就会变成 b:0, c:1， 但是其实b，c是没有变的，index是不稳定的，所以添加key值时， 要尽量使用稳定的值作为Key值， 这样可以提高性能
image.png
react 使用ref 获取DOM节点
image.png
image.png
react的生命周期函数
image.png
生命周期函数：是指在某一时刻组件会自动调用执行的函数
Mounting
componentWillMount:组件在即将挂在到页面之前被自动调用
render :数据（state或者props）发生变化时调用
componentDidMount:组件在挂在到页面之后自动执行
Updation
shouldComponentUpdate:组件被更新之前自动执行的函数， 需要返回一个Boolean值， true: 代表需要更新，false代表不需要更新组件。
componentWillUpdate：组件被更新之前会自动执行，但是会在shouldComponentUpdate返回true之后执行，如果返回false， 这个函数就不会被执行了
componentDidUpdate：组件更新之后会被执行
componentWillReceiveProps:一个组件要从父组件接收参数，如果与这个组件第一次存在于父组件中，就不会执行，如果这个组件之前已经存在于父组件中，才会执行
Unmount
componentWillUnmount:当组件即将被页面移除的时候会被自动执行
shouldComponentUpdate应用场景：
在父组件更新数据的时候，父组件的render函数会重新执行，而当父组件的render函数重新执行，子组件的render函数也会重新执行，这样对于子组件来说会造成一些性能上的损耗。这时可以用shouldComponentUpdate函数做一些性能优化，判断一下如果接受的props发生变化了，再去重新执行render函数，否则就不执行
image.png
react中的性能优化的几点
1.bind的绑定在constructor中进行绑定，这样可以保证作用域绑定的操作只会进行一次，还可以避免子组件无谓的渲染
image.png
2.react的setState内置的性能提升的机制，它是异步函数可以把多次的数据渲染整合成一次，这样降低虚拟DOM的比对频率
3.react底层用的虚拟DOM， 有同层比对和key值的概念，提升虚拟DOM比对的性能，从而提升react的性能
4.shouldComponentUpdate:可以提高组件的性能，避免无谓的组件的render函数的运行
网友评论