真正吃透React知识链路与底层逻辑, Part4_业务修改react底层逻辑-优快云博客

export default class App extends Component {
  state = {
    name: "qwe",
    age: "99",
  };
  changeAge() {
    this.setState({
      age: "100",
    });
  }
  render() {
    return (
      // <button onClick={() => this.changeAge()}> 这样不会报错
      <button onClick={this.changeAge}>
        {/* 这样会报错 */}
        {this.state.name} age is {this.state.age}
      </button>
    );
  }
}

生命周期函数

拆分componentDidMount/didUpdate/willUnmount里面的业务逻辑进useEffect，让逻辑更相关的贴合更近
更简单重用含有state的逻辑，我们可以将含有state还有一些hooks的逻辑全都单独封装成一个函数，然后哪里需要就调用
函数组件的编程思想更贴近React的设计理念，也就是UI=f(data)

使用方法

全面的hook API可以进入官方文档，Hook API 索引 – React

useState

const App = ()=>{
    // initialize state a as 1, and get setA which can manipulate a
    const [a, setA] = useState(1);
    
    return <button onClick={()=>setA(a + 1)} />
}

引入了state和修改state的方法
返回一个有两个元素的数组，第一个元素为状态变量，第二个元素为设置这个状态并驱动试图更新的API
一般的命名规则为：[a, setA] = useState(intialValue)

useEffet

const App = ({a,b})=>{
    const [c, ] = useState(123);
    useEffect(()=>{
        // 这个useEffect没有第二个参数（deps数组），这个effect会在每一次函数组件被调用的时候都运行
    })
    useEffect(()=>{
        // 这个useEffect的deps数组是一个空数组，意味着每一次检查deps数组他都不会变化，这个effect只会在这个component第一次被调用的时候运行
        // 一般用例为fetch数据，在全局事件中订阅
    }, [])
    useEffect(()=>{
        return ()=>{
            // useEffect的返回值是一个在这个组件将要被unMount的时候运行的函数
            // 一般可以用来取消订阅
            // 不论deps数组是什么，返回的clean up函数都只会跑一次
        }
    }, anything)
    useEffect(()=>{
        // 这个effect会在a,b,c之中任何一个有变化的时候被调用（包扩第一次）
    },[a,b,c])
}

引入了生命周期
有两个参数
- 第一个参数是需要执行的sideEffect，函数自身提供mounting和updating的effect，函数返回的另外一个函数提供unmounting的effect
- 第二个参数是deps数组，这个参数决定了什么时候effect函数会被执行，当有任意的deps数组的元素发生了变化，（对比通过Object.is来完成，可以理解成对于地址的对比）。

useState深层原理

这部分需要深入挖掘，但是目前对fiber架构没有足够的认知，留到未来
通过useState的深层原理做研究，对于别的hooks可以做借鉴，但不一定完全一样，未来可以深究
useState
- 第一次渲染，调用mountState，构建一个state的链表，并渲染
- 之后的渲染，调用updateSate，依次便利构建好的链表并渲染
- 如果useState出现在if或者switch里面，这意味着不是链表不会被便利，很可能我们得到的state错位了