React | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第6天。

09 React

9.1 React的设计思路

• 原生JS编写UI时有以下痛点

  • 状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
  • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
  • UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell

• 转换式与响应式

  • 转换式系统：给定输入求解输出，如编译器、数值计算

  • 响应式系统：监听事件，消息驱动。如监控系统、UI界面

    • 事件 -> 执行既定的回调 -> 状态变更 -> UI更新

• 对React框架的期望

  • 状态更新，UI自动更新。
  • 前端代码组件化，可复用，可封装。
  • 状态之间的互相依赖关系，只需声明即可。

• 组件化

  • 组件是组件的组合/原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部

• 状态归属问题

  • React是单向数据流，还是双向数据流？

    单向数据流，只有父组件可以传递数据给子组件

  • 如何解决状态不合理上升的问题？

    使用状态管理库统一管理

  • 组件的状态改变后，如何更新DOM？

    使用虚拟DOM，Diff算法

• 组件设计

  • 组件声明了状态和UI的映射。

  • 组件有Props/State两种状态。

    • 组件内部拥有私有状态State.
    • 组件接受外部的Props状态提供复用性。
    • 根据当前的State/Props，返回一个UI

  • 组件可由其他组件拼装而成。

• 生命周期

9.2 Hooks

挂载到React的生命周期函数上执行的函数

• useState

  • 传入一个初始值，返回一个状态，和set该状态的函数，可以通过调用该函数来实现状态的修改。

    function Example(){
        const [x,setX] = useState(0)
        
        return (
            <div>
                <p>你点击了{x}次</p>
                <button onClick = {()=> setX(x+1)}>点我</button>
            </div>
        );
    }
    

• useEffect

  • 传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖性被set时会执行。

  • 有”副作用“的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做一些其他的事情，比如网络请求，更新DOM，localStorage存储数据等。

    function Example(){
        const [x,setX] = useState(0)
        
        useEffect(()=>{
            document.title = `x`
        })
        
        return (
            <div>
                <p>你点击了{x}次</p>
                <button onClick = {()=> setX(x+1)}>点我</button>
            </div>
        );
    }
    

• 注意：不要在循环，条件或嵌套中调用Hook

9.3 React的实现

• JSX不符合JS标准语法

  转译即可

• 返回的JSX发生改变时，如何更新DOM

  • 虚拟DOM

    • 一种用于和真是DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
    • 它赋予了React声明式的API：你告诉React希望UI是什么状态，React就确保DOM匹配该状态。这使你可以从属性操作、事件处理和手动DOM更新这些构建应用程序时必要的操作中解放出来。

• State/Props更新时，要重新触发render函数

9.4 状态管理库

将状态抽离到UI外部进行统一管理