生命周期、setState、函数柯里化

React 生命周期

挂载阶段

1. constructor
   • 初始化 state
   • 创建 ref 引用
2. render

• 渲染 UI

3. componentDidMount
   • 发起请求
   • 操作渲染后的 DOM

---

更新阶段

1. render
   • 渲染 UI 不能直接调用setState，因为调用之后会引起数据更新，就会触发render函数，就会导致程序死循环
2. componentDidUpdate
   • 获取更新后的数据/DOM 也是不能直接调用setState

---

卸载阶段

1. componentWillUnMount
   • 清除定时器
   • 解绑事件
   • 触发销毁：ReactDOM.unmountComponentAtNode(document.getElementById('root'))

---

setState

更新数据的表现

• 异步
  • 生命周期勾子内部
  • 合成事件内部
• 同步
  • 定时器内部
  • 原生事件

---

setState本身确实是一个同步方法

---

其他语法

1. 如何立即获取更新后的数据
   • 把代码写到 this.setState 第二个参数回调里面
2. 多次调用setState如何实时拿到上一次的 state

// prevState 就表示上一次更新完毕后的数据
this.setState((preState) => {
    return {
        count: preState.count + 1,
    }
})

---

柯里化

概念

通过函数调用继续返回函数的形式，实现多次接受参数最后统一处理的编码形式

作用

参数服用

如何把一个普通函数进行柯里化

function fun(name, age, sex) {
  console.log(`${name}今年${classs}岁，性别${xingming}`)
}
/* fun1('张三', 18, '男')
fun1('李四', 18, '男')
fun1('王五', 18, '男') */

const fun2 = curry(fun1)
const fn = fun2(18, '男')
fn('张三')
fn('李四')
fn('王五')