react第八单元(什么是纯函数-组件的性能优化-pureComponent-组件性能优化的原理)

课程目标

1. 理解纯函数
2. 熟练掌握组件性能优化的几种技巧
3. pureComponent和Component的区别

#知识点

1. 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数

• 函数的返回结果只依赖于它的参数
• 函数执行过程里面没有副作用

const a = 1
const foo = (b) => a + b
foo(2) // => 3

 

foo 函数不是一个纯函数，因为它返回的结果依赖于外部变量 a，我们在不知道 a 的值的情况下，并不能保证 foo(2) 的返回值是 3。虽然 foo 函数的代码实现并没有变化，传入的参数也没有变化，但它的返回值却是不可预料的，现在 foo(2) 是 3，可能过了一会就是 4 了，因为 a 可能发生了变化变成了 2。

const a = 1
const foo = (x, b) => x + b
foo(1, 2) // => 3

 

现在 foo 的返回结果只依赖于它的参数 x 和 b，foo(1, 2) 永远是 3。今天是 3，明天也是 3，在服务器跑是 3，在客户端跑也 3，不管你外部发生了什么变化，foo(1, 2) 永远是 3。只要 foo 代码不改变，你传入的参数是确定的，那么 foo(1, 2) 的值永远是可预料的。

这就是纯函数的第一个条件：一个函数的返回结果只依赖于它的参数。

函数执行过程没有副作用 一个函数执行过程对产生了外部可观察的变化那么就说这个函数是有副作用的。

2. 组件性能优化

• 定制shouldComponentUpdate函数 shouldComponentUpdate的作用，pureComponent继承和Component继承。如果你的组件只有当 props.color 或者 state.count 的值改变才需要更新时，你可以使用 shouldComponentUpdate 来进行检查
• render里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量
• Immutable.js 不可变数据类型
• 多个react组件性能优化，key的优化

3. pureComponent和Component的区别

如果你知道在什么情况下你的组件不需要更新，你可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作。 在大部分情况下，你可以继承 React.PureComponent 以代替手写 shouldComponentUpdate()。它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。

#授课思路

#案例和作业

1. 完成列表渲染 实现上拉加载 注意组件性能优化