React框架详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Jeremy_Lin_PC/article/details/108994557

什么是React？

声明式开发
可以与其他框架并存
组件化
单向数据流（state 为局部的或是封装的的原因）
视图层框架
函数式编程

Recat的视图与数据交互原理是什么？

当组件的state或者props发生变化的时候，render函数就会重新执行
当父组件的render函数被运行时，它的子组件的render都将被重新运行一次

相对于每个组件，其对应的的生命周期函数？

1. 组件模板挂载过程（Mounting）：

[1] componentWillMount函数是在组件即将被挂载到页面的时刻自动执行
[2] render函数是组件正在挂载的时候，自动被执行
[3] componentDidMount函数是组件被挂载到页面之后，自动被执行

2. 组件模板数据更新过程（Updation）：

props数据更新过程：

[1] componentWillReceiveProps函数是当一个组件从父组件接受参数；如果这个组件第一次存在于父组件中，不会执行；如果这个组件之前已经存在于父组件中，才会执行（只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行。）
[2] shouldComponentUpdate函数是组件被更新之前，它会自动被执行，用于判断组件是否执行更新操作，必须返回一个boolean值
[3] componentWillUpdate函数是组件被更新之前，它会自动执行，但是它在shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回true它才执行；如果返回false，这个函数就不会被执行
[4] render函数是组件正在更新的时候，自动被执行
[5] componentDidUpdate函数是组价更新完成之后，它会被执行

state数据更新过程：

[1] shouldComponentUpdate函数是组件被更新之前，它会自动被执行，用于判断组件是否执行更新操作，必须放回一个boolean值
[2] componentWillUpdate函数是组件被更新之前，它会自动执行，但是它在shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回true它才执行；如果返回false，这个函数就不会被执行
[3] render函数是组件正在更新的时候，自动被执行
[4] componentDidUpdate函数是组价更新完成之后，它会被执行

3. 组件模板删除过程（Unmounting）：

componentWillUnmount函数是当这个组件即将从页面中被剔除的时候，会被执行

react的性能优化有何方法？

将方法需要用到的this指针的作用域写在constructor函数中。这样做的话，this指针的作用域只需要初始化操作一次，就可以在整个组件中使用，可以避免组件的无谓渲染
setState内置了异步操作方法，可以把多次数据改变结合成一次来操作，降低虚拟DOM的比对频率，使得性能得以提升
react的底层用到了“虚拟DOM的概念”、“同层比对”以及“key值的概念”，来提升DOM比对的速度，从而提升react的性能
借助shouldComponentUpdate函数来避免无谓的组件（一般指的是子组件）的render函数的执行，从而来提高react的性能。