当前位置:   article > 正文

掘金小课《React进阶实战指南》笔记_react进阶实践指南

react进阶实践指南

阅读了掘金小课《React进阶实战指南》,做的笔记加自己的一些总结。部分资源来自掘金小课《React进阶实战指南》

认识JSX

Jsx统统被转为React.createElement,

createElement参数:

  • 第一个参数:如果是组件类型,会传入组件对应的类或函数;如果是 dom 元素类型,传入 div 或者 span 之类的字符串。
  • 第二个参数:一个对象,在 dom 类型中为标签属性,在组件类型中为 props 。
  • 其他参数:依次为 children,根据顺序排列。

<div>
   <TextComponent />
   <div>hello,world</div>
   let us learn React!
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

转化成

 React.createElement("div", null,
        React.createElement(TextComponent, null),
        React.createElement("div", null, "hello,world"),
        "let us learn React!"
    )
  • 1
  • 2
  • 3
  • 4
  • 5

vdom样子:

JSX转化规则,经过createElement转化后
  • element类型,如div => reactElement类型,type为’div’

  • 文本类型,如’aaa’=> ‘aaa’,直接转为字符串

  • 数组类型,如[<div>,<div>] => [{type: div…}, {type: div…}],转化后是element的数组

  • 组件类型,转为react element,type是函数或者类本身

  • 三元运算 / 表达式,先运算,再按照上述规则转化

  • 函数执行,先执行,再按照上述规则转化

Fiber

针对不同的react element,Fiber的tag也不同

export const FunctionComponent = 0;       // 函数组件
export const ClassComponent = 1;          // 类组件
export const IndeterminateComponent = 2;  // 初始化的时候不知道是函数组件还是类组件 
export const HostRoot = 3;                // Root Fiber 可以理解为根元素 , 通过reactDom.render()产生的根元素
export const HostPortal = 4;              // 对应  ReactDOM.createPortal 产生的 Portal 
export const HostComponent = 5;           // dom 元素 比如 <div>
export const HostText = 6;                // 文本节点
export const Fragment = 7;                // 对应 <React.Fragment> 
export const Mode = 8;                    // 对应 <React.StrictMode>   
export const ContextConsumer = 9;         // 对应 <Context.Consumer>
export const ContextProvider = 10;        // 对应 <Context.Provider>
export const ForwardRef = 11;             // 对应 React.ForwardRef
export const Profiler = 12;               // 对应 <Profiler/ >
export const SuspenseComponent = 13;      // 对应 <Suspense>
export const MemoComponent = 14;          // 对应 React.memo 返回的组件
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Component

  • 如果没有在 constructor 的 super 函数中传递 props,那么接下来 constructor 执行上下文中就获取不到 props ,这是为什么呢?

    • 答:绑定 props 是在父类 Component 构造函数中,执行 super 等于执行 Component 函数,此时 props 没有作为第一个参数传给 super() ,在 Component 中就会找不到 props 参数,从而变成 undefined ,在接下来 constructor 代码中打印 props 为 undefined 。
  • 函数组件和类组件本质的区别是什么呢

    • 对于类组件来说,底层只需要实例化一次,实例中保存了组件的 state 等状态。对于每一次更新只需要调用 render 方法以及对应的生命周期就可以了。但是在函数组件中,每一次更新都是一次新的函数执行,一次函数组件的更新,里面的变量会重新声明。
  • 组件通信方式:

    • props
    • eventbus
    • redux
    • Localstorage
    • context
    • ref
玄学State
  • state同步异步
    • 在18之前,对于setState,react会采用批量更新的方式更新state,通过一个开关来实现批量更新。所以处于微任务或者红任务的setState无法被合并。
    • 在18之后,对于setState,react批量更新的方式不再是通过开关,而是通过事件的优先级,同一优先级的事件会被统一处理,处于微任务和红任务之间的setState也会被合并。
  • 类组件中的 setState 和函数组件中的 useState 有什么异同?
    • 首先从原理角度出发,setState和 useState 更新视图,底层都调用了scheduleUpdateOnFiber 方法,而且事件驱动情况下都有批量更新规则。
    • 在不是 pureComponent 组件模式下, setState 不会浅比较两次 state 的值,只要调用 setState,在没有其他优化手段的前提下,就会执行更新。
    • 但是useState的setState,在创建第一个update的时候,会先执行得到新的state,并且进行比较,若值相同,不会开启新的一轮调度
    • setState 有专门监听 state 变化的回调函数 callback,可以获取最新state;但是在函数组件中,只能通过 useEffect 来执行 state 变化引起的副作用。
深入Props
  • props能做什么?
    • 父组件 props 可以把数据层传递给子组件去渲染消费。另一方面子组件可以通过 props 中的 callback ,来向父组件传递信息。还有一种可以将视图容器作为 props 进行渲染。
    • 对于更新机制,在vue中,基于劫持数据的变化并且通知订阅者通知其更新,但是在react中,无法检测到数据更新波动的范围,所以props成为了作为组件是否更新的重要准则,变化及更新,所以后来出现了PureCompoennt和memo等优化手段。
理解生命周期
mount阶段
  • constructor
  • getDerivedStateFromProps(nextProps,prevState)
  • componentWillMount(没有getDerviedStateFromProps或者没有getSnapShotBeforeUpdate才会执行),不再推荐
  • render函数执行(beginWork)
  • componentDidMount执行(layout阶段)
update阶段
  • componentWillReceiveProps(没有getDerviedStateFormProps的时候执行)

  • getDerviedStateFormProps

  • shouldComponentUpdate

  • componentWillUpdate

  • render

  • getSnapShotBeforeUpdate(在dom更新前执行,before-mutation阶段)

  • componentDidUpdate

unmount阶段
  • componentWillUnMount(mutation阶段)
getDerivedStateFormProps(nextProps,prevState)

类的静态属性,接受新的props和老的state。返回值会合并到最新的state去。

  • 在初始化和更新阶段,接受父组件的 props 数据, 可以对 props 进行格式化,过滤等操作,返回值将作为新的 state 合并到 state 中,供给视图渲染层消费。
  • 只要组件更新,就会执行 getDerivedStateFromProps,不管是 props 改变,还是 setState ,或是 forceUpdate 。
  • getDerivedStateFromProps作用:
    • 代替 componentWillMount 和 componentWillReceiveProps
    • 组件初始化或者更新时,将 props 映射到 state。
    • 返回值与 state 合并完,可以作为 shouldComponentUpdate 第二个参数 newState ,可以判断是否渲染组件。
componentWillMount & componnetWillReceiveProps
  • 16.3之后,componentWillMount和componentWillUpdate和ComponentWillReceiveProps都带上了UNSAFE标识。因为这三个函数,都是在类组件render之前执行的,对于render,可以通过shouldUpdate控制是否执行,而这三个却没有限制,有着多次调用的风险。
  • componnetWillReceiveProps是在组件更新阶段,因为props的更新触发。但是只要组件触发更新,调用render,那么React.createElement就会重新执行,而props就会被重新创建,导致props没变,却会重复执行。
  • 当 props 不变的前提下, PureComponent 组件能否阻止 componentWillReceiveProps 执行?不能,组件跟生命周期执行没有关系,PureComponent相当于实现了shouldUpdate函数,但不能阻止componentWillReceiveProps执行。
  • componentWillUpdate被getSnapShotBeforeUpdate替代。
getSnapshotBeforeUpdate(prevProps,preState)更新前的props和更新前的preState
  • 返回值作为componentDidUpdate的第三个参数,代替componentWillUpdate,在before-mutaiton阶段执行。getSnapshotBeforeUpdate 这个生命周期意义就是配合componentDidUpdate 一起使用,计算形成一个 snapShot 传递给 componentDidUpdate 。保存一次更新前的信息。
componentDidUpdate(prevProps, prevState, snapshot) & componentDidMount
  • 在layout阶段执行,此时dom更新完毕。
shouldComponentUpdate(newProps,newState,nextContext)
  • 在beginWork阶段执行,用于优化手段。如果有getDerivedStateFromProps,返回值也会合并到最新的state,传给shouldComponentUpdate。
componentWillUnmount
  • mutaiton阶段执行,在dom即将销毁之前执行,清除延时器,定时器。
函数hooks执行阶段对应生命周期
useEffect & useLayoutEffect

一个是同步执行,一个是异步调用。useLayoutEffect会在layout阶段执行,useEffect会在layout阶段之后异步调用。

多功能Ref

创建ref
  • useRef
  • createRef
  • 两者的区别就是函数组件useRef是绑定在fiber上的,因为函数组件每次执行都会重新执行useRef。而update时候的useRef是直接从fiber上吗获取ref对象返回;而类有实例,它可以保存ref信息。
类组件创建ref的三种方式
  • ref是一个字符串, this.refs
  • ref是一个函数 ref={(node)=> this.currentDom = node }
  • 通过createRef创建ref对象
高阶用法
  • 通过forwardRef转发ref

    const NewFather = React.forwardRef((props,ref)=> <Father grandRef={ref}  {...props} />)
    在Father里面就可以使用this.props.grandRef来绑定获取ref对象,也可以给ref对象赋值其他的东西
    
    • 1
    • 2
  • 组件通信,父组件通过ref控制子组件类实例,或者函数子组件的一些方法,操控子组件,如form的resetFields和setFieldsValue。函数组件没有实例,通过forwardRef + useImperativeHandle控制子组件的一些方法

    function Son(props, ref){
        const iptRef = useRef<HTMLInputElement>(null)
        useImperativeHandle(ref,()=>{
            const onSonFocus = () =>{
                iptRef.current.focus()
            }
            const onChangeValue = () =>{
                iptRef.current.value = 'hahahah'
            }
    
            return {
                onSonFocus,
                onChangeValue
            }
        },[])
        
        return <input type="text"  ref={iptRef}/>
    }
    const ForSon = React.forwardRef(Son)
    const App = () =>{
        const sonRef = useRef<any>(null)
        return <div>
            <button onClick={()=>{sonRef.current.onSonFocus()}}>focus</button>
            <button onClick={()=>{sonRef.current.onChangeValue()}}>change</button>
            <ForSon ref={sonRef}/>
        </div>
    }
    (ReactDOM as any).createRoot(document.getElementById('root')).render(<App/>)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

Context

createContext

const ThemeContext = React.createContext(null) //
const ThemeProvider = ThemeContext.Provider  //提供者
const ThemeConsumer = ThemeContext.Consumer // 订阅消费者
  • 1
  • 2
  • 3

Provider使用

const ThemeProvider = ThemeContext.Provider  //提供者
export default function ProviderDemo(){
    const [ contextValue , setContextValue ] = React.useState({  color:'#ccc', background:'pink' })
    return <div>
        <ThemeProvider value={ contextValue } > 
            <Son />
        </ThemeProvider>
    </div>
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

消费者一共有三种方式消费:

  • 类组件静态属性contextType

    const ThemeContext = React.createContext(null)
    // 类组件 - contextType 方式
    class ConsumerDemo extends React.Component{
       render(){
           const { color,background } = this.context
           return <div style={{ color,background } } >消费者</div> 
       }
    }
    ConsumerDemo.contextType = ThemeContext
    
    const Son = ()=> <ConsumerDemo />
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 函数组件useContext

    const ThemeContext = React.createContext(null)
    // 函数组件 - useContext方式
    function ConsumerDemo(){
        const  contextValue = React.useContext(ThemeContext) /*  */
        const { color,background } = contextValue
        return <div style={{ color,background } } >消费者</div> 
    }
    const Son = ()=> <ConsumerDemo />
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 订阅者-Consumer模式

    const ThemeConsumer = ThemeContext.Consumer // 订阅消费者
    
    function ConsumerDemo(props){
        const { color,background } = props
        return <div style={{ color,background } } >消费者</div> 
    }
    const Son = () => (
        <ThemeConsumer>
           { /* 将 context 内容转化成 props  */ }
           { (contextValue)=> <ConsumerDemo  {...contextValue}  /> }
        </ThemeConsumer>
    ) 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

在 Provider 里 value 的改变,会使引用contextType,useContext 消费该 context 的组件重新 render ,同样会使 Consumer 的 children 函数重新执行,与前两种方式不同的是 Consumer 方式,当 context 内容改变的时候,不会让引用 Consumer 的父组件重新更新。

问题:

提供者的组件的setState目的是为了触发调度,影响消费者组件获取到的context改变从而引起消费者render。但是可能会造成提供者的子组件无意义的渲染。

解决:

  • 使用React.memo或者PureComponent,防止重复渲染。

  • 使用useMemo缓存vdom。jsx会被转为React.createElement,返回一个vdom。重复渲染是因为React.createElement被重复调用导致生成新的vdom。

    <ThemeProvider value={ contextValue } >
        { React.useMemo(()=>  <Son /> ,[]) }
    </ThemeProvider>
    
    • 1
    • 2
    • 3
高阶组件

属性代理&反向继承

属性代理
function HOC(WrapComponent){
    return class Advance extends React.Component{
       state={
           name:'alien'
       }
       render(){
           return <WrapComponent  { ...this.props } { ...this.state }  />
       }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

缺点:转发ref需要forwardRef;无法获取组件的原始状态,需要使用ref;无法直接继承静态属性

反向继承
class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
function HOC(Component){
    return class wrapComponent extends Component{ /* 直接继承需要包装的组件 */
        
    }
}
export default HOC(Index) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
经典例子:
  • 强化props:react-router的withRouter,将react-router的context作为props传入。

  • 劫持渲染, 动态加载 React.lazy,接受一个promise,如()=>import(‘…/pages/index’),promise的返回值是一个组件,通过componentDidMount,等到react渲染该组件执行componentDidMount的时候,才会去接受promise.then取得组件,进行渲染。

  • 组件赋能,通过ref控制类实例。

  • 事件监控,在外层包裹一层div,监控点击事件等等。

注意事项
  • 谨慎修改原型链上的属性,如Component.prototype.componentDidMount
  • 不要在函数组件内部或类组件render函数中使用HOC,HOC每次都会生成新的组件,不满足diff优化.

React事件系统

原因:
  • 不同浏览器,事件存在不同的兼容性,所以必须统一兼容。
  • 其二,react的事件在17之前统统绑定在document,在17之后绑定在了容器上面,防止过多事件绑定在原生dom上,由于不是绑定在真实dom上,react需要自己实现一套机制,事件俘获,到事件冒泡。
事件合成

三部分:

  • 事件合成,初始化事件插件
  • 渲染过程中,收集事件,注册到container。
  • 一次用户交互,事件触发,到事件执行一系列过程。

事件合成的概念:React中,事件并不是绑定原声事件,而是通过合成,如onClick由click合成,onChange由blur,change,focus等合成。

事件插件机制

React 有一种事件插件机制,比如上述 onClick 和 onChange ,会有不同的事件插件 SimpleEventPlugin ,ChangeEventPlugin 处理,如

const registrationNameModules = {
    onBlur: SimpleEventPlugin,
    onClick: SimpleEventPlugin,
    onClickCapture: SimpleEventPlugin,
    onChange: ChangeEventPlugin,
    onChangeCapture: ChangeEventPlugin,
    onMouseEnter: EnterLeaveEventPlugin,
    onMouseLeave: EnterLeaveEventPlugin,
    ...
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
{
    onBlur: ['blur'],
    onClick: ['click'],
    onClickCapture: ['click'],
    onChange: ['blur', 'change', 'click', 'focus', 'input', 'keydown', 'keyup', 'selectionchange'],
    onMouseEnter: ['mouseout', 'mouseover'],
    onMouseLeave: ['mouseout', 'mouseover'],
    ...
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

registrationNameDependencies对象,保存了合成事件和原生事件的联系。

事件绑定

onChange等这些事件,保存在了dom对应的fiber.memoizedProps。

绑定一个onChange,实际上绑定了取出了registrationNameDependencies的onChange的[‘blur’, ‘change’, ‘click’, ‘focus’, ‘input’, ‘keydown’, ‘keyup’, ‘selectionchange’],依次进行addEvenListener注册

事件触发
  • 第一步 批量更新,

D3A29E95-F235-417B-951C-A15AB2ABA391.jpg

首先,通过dom找到fiber。然后开启批量更新,有批量更新开关。

export function batchedEventUpdates(fn,a){
    isBatchingEventUpdates = true; //打开批量更新开关
    try{
       fn(a)  // 事件在这里执行
    }finally{
        isBatchingEventUpdates = false //关闭批量更新开关
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 第二步 合成事件源

通过onClick找到事件插件SimpleEventPlugin,合成新的事件源e,里面就包含了 preventDefault 和 stopPropagation 等方法。

  • 第三部 形成时间队列,模拟俘获冒泡

通过一个数组收集事件,从target开始根据return指针往上找,遇到俘获事件就unshift插入到数组头部,遇到冒泡事件就push到数组尾部。一个循环下来,就收集完所有的事件了。然后根据数组依次执行回调。

React如何模拟阻止事件冒泡
function runEventsInBatch(){
    const dispatchListeners = event._dispatchListeners;
    if (Array.isArray(dispatchListeners)) {
    for (let i = 0; i < dispatchListeners.length; i++) {
      if (event.isPropagationStopped()) { /* 判断是否已经阻止事件冒泡 */
        break;
      }    
      dispatchListeners[i](event) /* 执行真正的处理函数 及handleClick1... */
    }
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

如果有一个调用了e.stopPropagation(),那么事件源里将有状态证明此次事件已经停止冒泡,下一次循环的时候,event.isPropagationStopped()为ture,,直接跳出当前循环,不再执行接下去的事件。

React调度

v15的react面临着js执行过久的问题,如何解决呢?对比vue

  • vue 有template 模版收集依赖的过程,通过代理可以轻松构建响应式,使得更新的时候,vue可以迅速找到依赖的ui,以组件化的粒度更新组件,渲染视图
  • 而在react中,一次更新无法具体知道波及的范围,只能选择通过root从根节点开始找不同。所以一次更新会花费大量js计算事件。既然如此,react选择了时间分片,让浏览器每一帧只给react一点时间去执行j s,剩余时间作为绘制的时间,防止页面卡顿。与 vue 更快的响应,更精确的更新范围,React 选择更好的用户体验。
Schedule原理。

react通过MessageChannel创建宏任务,并通过最小堆队列,和赋予不同任务优先级,以及过期时间,通过while循环,每执行一段js就判断是否到时间,如果到了,就继续调度宏任务,等下一帧再执行js,这一帧剩余的时间交给浏览器进行其他工作。

为啥不用requestIdleCallback?
  • requestIdleCallback 目前只有谷歌浏览器支持 ,为了兼容每个浏览器,React需要自己实现一个 requestIdleCallback
具备条件
  • 1 实现的这个 requestIdleCallback ,可以主动让出主线程,让浏览器去渲染视图。
  • 2 一次事件循环只执行一次,因为执行一个以后,还会请求下一次的时间片。

满足这两点的只有宏任务了,

  • setTimeout(fn, 0) 可以满足创建宏任务,让出主线程,但是递归执行 setTimeout(fn, 0) 时,最后间隔时间会变成 4 毫秒左右,而不是最初的 1 毫秒

Scheduler:

2.jpg

异步调度+调和:

3.jpeg

调和

为什么要用fiber?
  • 更新fiber的过程叫做调和器,Reconciler。每一个 fiber 都可以作为一个执行单元来处理,所以每一个 fiber 可以根据自身的过期时间expirationTime( v17 版本叫做优先级 lane )来判断是否还有空间时间执行更新,如果没有时间更新,就要把主动权交给浏览器去渲染
  • 在浏览器空余时间执行宏任务的时候,通过Schedule调度器,再次恢复执行单元,本质上中断了js执行,提高用户体验。
fiber和React element和dom
  • element 是 React 视图层在代码层级上的表象,也就是开发者写的 jsx 语法,写的元素结构,都会被创建成 element 对象的形式。上面保存了 props , children 等信息。
  • DOM 是元素在浏览器上给用户直观的表象。
  • fiber 可以说是是 element 和真实 DOM 之间的交流枢纽站,一方面每一个类型 element 都会有一个与之对应的 fiber 类型,element 变化引起更新流程都是通过 fiber 层面做一次调和改变,然后对于元素,形成新的 DOM 做视图渲染

2.jpg

双缓存树
  • 如同canvas,优先在内存构建好下一桢的动画,绘制完毕后直接替换,省去了白屏时间,这种在内存中构建并直接替换的技术叫做双缓存。

  • React 用 workInProgress 树(内存中构建的树) 和 current (渲染树) 来实现更新逻辑。双缓存一个在内存中构建,一个渲染视图,两颗树用 alternate 指针相互指向,在下一次渲染的时候,直接复用缓存树做为下一次渲染树,上一次的渲染树又作为缓存树,这样可以防止只用一颗树更新状态的丢失的情况,又加快了 DOM 节点的替换与更新。

两大阶段,render+commit

render阶段包括beginWork和completeWork。

beginWork:是向下调和的过程。就是由 fiberRoot 按照 child 指针逐层向下调和,期间会执行函数组件,实例类组件,diff 调和子节点,打不同effectTag。

completeUnitOfWork:是向上归并的过程,如果有兄弟节点,会返回 sibling兄弟,没有返回 return 父级,一直返回到 fiebrRoot ,期间可以形成effectList,对于初始化流程会创建 DOM ,对于 DOM 元素进行事件收集,处理style,className等。

BeginWork阶段
  • 对于组件,执行部分生命周期,执行 render ,得到最新的 children (只会处理第一层的儿子,孙子不处理)。
  • 向下遍历调和 children ,复用 oldFiber ( diff 算法)。
  • 打不同的副作用标签 effectTag ,比如类组件的生命周期,或者元素的增加,删除,更新。

核心函数:reconcileChildren

function reconcileChildren(current,workInProgress){
   if(current === null){  /* 初始化子代fiber  */
        workInProgress.child = mountChildFibers(workInProgress,null,nextChildren,renderExpirationTime)
   }else{  /* 更新流程,diff children将在这里进行。 */
        workInProgress.child = 				reconcileChildFibers(workInProgress,current.child,nextChildren,renderExpirationTime)
   }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

对于第一次mount,会调度children,生成子节点的fiber,并通过child和return指针关联起来。

对于第二次update,会diff children,打上对应的effectTag

effectTag的常用例子
export const Placement = /*             */ 0b0000000000010;  // 插入节点
export const Update = /*                */ 0b0000000000100;  // 更新fiber
export const Deletion = /*              */ 0b0000000001000;  // 删除fiebr
export const Snapshot = /*              */ 0b0000100000000;  // 快照
export const Passive = /*               */ 0b0001000000000;  // useEffect的副作用
export const Callback = /*              */ 0b0000000100000;  // setState的 callback
export const Ref = /*                   */ 0b0000010000000;  // ref
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
completeUnitOfWork
  • 首先 completeUnitOfWork 会将带有 effectTag 的 Fiber 节点会被保存在一条被称为 effectLists 的单向链表中。在 commit 阶段,将不再需要遍历每一个 fiber ,只需要执行更新 effectList 就可以了。
  • completeWork 阶段对于组件处理 context ;对于元素标签初始化,会创建真实 DOM ,将子孙 DOM 节点插入刚生成的 DOM 节点中;会触发 diffProperties 处理 props ,比如事件收集,style,className 处理。
Commit阶段

commit可以分为:

  • Before-mutation之前

  • before-mutation(更新dom之前)

  • mutation(更新dom)

  • Layout(更新dom之后)

  • layout之后

Before-mutation
function commitBeforeMutationEffects() {
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag;
    if ((effectTag & Snapshot) !== NoEffect) {
      const current = nextEffect.alternate;
      // 调用getSnapshotBeforeUpdates
      commitBeforeMutationEffectOnFiber(current, nextEffect);
    }
    if ((effectTag & Passive) !== NoEffect) { //如果有useEffect的effectTag
       scheduleCallback(NormalPriority, () => {
          flushPassiveEffects(); //异步调用useEffect,这里只是注册。
          return null;
        });
    }
    nextEffect = nextEffect.nextEffect;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 因为 Before mutation 还没修改真实的 DOM ,是获取 DOM 快照的最佳时期,如果是类组件有 getSnapshotBeforeUpdate ,那么会执行这个生命周期。
  • 会异步调用 useEffect ,在生命周期章节讲到 useEffect 是采用异步调用的模式,其目的就是防止同步执行时阻塞浏览器做视图渲染。
Mutation
function commitMutationEffects(){
    while (nextEffect !== null) {
        if (effectTag & Ref) { /* 置空Ref */
            const current = nextEffect.alternate;
            if (current !== null) {
                commitDetachRef(current);
            }
        }
        switch (primaryEffectTag) {
            case Placement: {} //  新增元素
            case Update:{}     //  更新元素
            case Deletion:{}   //  删除元素
        }
    } 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 置空 ref 。
  • 对新增元素,更新元素,删除元素。进行真实的 DOM 操作。
  • 调用对应的生命周期,比如函数组件的useLayoutEffect的销毁函数。或者类组件的componentWillUnMount等。
Layout
function commitLayoutEffects(root){
     while (nextEffect !== null) {
          const effectTag = nextEffect.effectTag;
          commitLayoutEffectOnFiber(root,current,nextEffect,committedExpirationTime)
          if (effectTag & Ref) {
             commitAttachRef(nextEffect);
          }
     }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • commitLayoutEffectOnFiber 对于类组件,会执行生命周期(componentDIdMount,componentDidUpdate),setState 的callback,对于函数组件会执行 useLayoutEffect 钩子。
  • 如果有 ref ,会重新赋值 ref 。

3.jpeg

Hooks

Hooks 出现本质上原因是:

  • 1 让函数组件也能做类组件的事,有自己的状态,可以处理一些副作用,能获取 ref ,也能做数据缓存。
  • 2 解决逻辑复用难的问题。
  • 3 放弃面向对象编程,拥抱函数式编程。

hooks作为函数组件fiber和函数组件之间沟通的桥梁

hook1.jpg

Hooks对象本质
思考一个问题 React Hooks 为什么必须在函数组件内部执行?React 如何能够监听 React Hooks 在外部执行并抛出异常?

React hooks以三种处理策略存在 React 中:

  • 1 ContextOnlyDispatcher: 第一种形态是防止开发者在函数组件外部调用 hooks ,所以第一种就是报错形态,只要开发者调用了这个形态下的 hooks ,就会抛出异常。
  • 2 HooksDispatcherOnMount: 第二种形态是函数组件初始化 mount ,因为之前讲过 hooks 是函数组件和对应 fiber 桥梁,这个时候的 hooks 作用就是建立这个桥梁,初次建立其 hooks 与 fiber 之间的关系。
  • 3 HooksDispatcherOnUpdate:第三种形态是函数组件的更新,既然与 fiber 之间的桥已经建好了,那么组件再更新,就需要 hooks 去获取或者更新维护状态。

所有函数组件的触发都在renderWIthHooks执行,可以看这个函数的逻辑。

let currentlyRenderingFiber
function renderWithHooks(current,workInProgress,Component,props){
    currentlyRenderingFiber = workInProgress; //赋值当前fiber,hooks通过这个获取fiber
    workInProgress.memoizedState = null; /* 每一次执行函数组件之前,先清空状态 (用于存放hooks列表)*/
    workInProgress.updateQueue = null;    /* 清空状态(用于存放effect list) */
  
    ReactCurrentDispatcher.current =  current === null || current.memoizedState === null ? HooksDispatcherOnMount : HooksDispatcherOnUpdate /* 判断是初始化组件还是更新组件 */
  
    let children = Component(props, secondArg); /* 执行我们真正函数组件,所有的hooks将依次执行。 */
  
    ReactCurrentDispatcher.current = ContextOnlyDispatcher; /* 将hooks变成第一种,防止hooks在函数组件外部调用,调用直接报错。 */
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

从上面可以看到,

  • 对于类组件,memoizedState保存着state的信息。对于函数组件,memoizedState保存着hooks列表。

  • 对于类组件,updateQueue存放着update链表等更新信息。而对于函数组件,updateQueue保存着useEffect/useLayoutEffect 产生的副作用组成的链表

  • 在函数真正执行之前,React hooks对象被赋予了真正的Hooks对象,而当函数组件执行完毕之后,hooks对象被重新赋值了报错的对象。这也是解释了为什么hooks只能在函数中执行,因为。引用的 React hooks都是从 ReactCurrentDispatcher.current 中的, React 就是通过赋予 current 不同的 hooks 对象达到监控 hooks 是否在函数组件内部调用

  • 每个Hooks内部可以读取到fiber的原因是因为在函数执行之前,fiber被赋值到了currentlyRenderingFiber,hooks通过currentlyRenderingFiber读取到fiber

为什么hooks不能出现在if else语句。

答:可能会破坏hooks的顺序。

每一个hooks执行的时候,会创建一个hooks对象,hooks对象通过next指针关联。等到更新阶段执行hooks的时候,会复用第一次创建的hooks对象。假设有一个存在条件语句下的hooks,在第一次更新的时候,他执行了,创建了hooks对象。,到第二次更新的时候,他不执行了,而这个时候却少一个hooks来消费hooks对象,会导致出现如下结果:

hook3.jpeg

第二次

hook2服用了hook1的hooks对象,而useRef执行的时候,指向的hooks.next却是useState,也就是hook2的hooks对象,因为useState!== useRef,所以就会报错。这也是为什么hooks不能出现在条件语句的原因,会破坏hooks的结构顺序。

处理useEffect

对于mount的useEffect,执行mountEffect, mountEffect调用mountEffectImpl

// useEffect的mount
function mountEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
    return mountEffectImpl(
      PassiveEffect | PassiveStaticEffect, //effectTag标志
      HookPassive, //useEffect的标志
      create,
      deps,
    );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
// fiberFlags表示effectTag的标志,而hookFlags表示是useEffect的标志
function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = mountWorkInProgressHook(); //创建hooks
  const nextDeps = deps === undefined ? null : deps; //依赖
  currentlyRenderingFiber.flags |= fiberFlags; //添加effectTag
  hook.memoizedState = pushEffect( //创建effect保存在hook.memoizedState
    HookHasEffect | hookFlags,
    create,
    undefined,
    nextDeps,
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

可以看到,对于useEffect,第一次会创建一个hooks,然后打上标记。最后调用puseEffect创建一个effect存放到hook.memoizedState上。

这里插一嘴,对于useEffect,标志是HookPassive,对于useLayoutEffect,他的执行是mountLayoutEffect

function mountLayoutEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  let fiberFlags: Flags = UpdateEffect;
  if (enableSuspenseLayoutEffectSemantics) {
    fiberFlags |= LayoutStaticEffect;
  }
  return mountEffectImpl(fiberFlags, HookLayout, create, deps);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这里可以看到,useLayoutEffect的标志是HookLayout,他跟useEffect一样都是调用同一个方法,只不过给了不同的标记。

接着看pushEffect,pushEffect不只会创建effect,如

// 创建effect, tag是effectTag, create是执行函数, deps是依赖项
function pushEffect(tag, create, destroy, deps) {
  // 创建effect
  const effect: Effect = {
    tag,
    create,
    destroy,
    deps,
    // Circular
    next: (null: any),
  };
  // 获取当前fiber的updateQueue,函数组件执行前,fiber已经赋予了currentlyRenderingFiber
  let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
  
  // 通过环状链表将effect存放在fiber.updateQueue上
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

pushEffect创建effect之后,还会将effect以环状链表的形式,存放在fiber.updateQueue上。

这样设计是因为函数组件可能存在多个useEffect和useLayoutEffect,将这些effect收集起来,在commit阶段的时候统一处理。

比如

React.useEffect(()=>{
    console.log('第一个effect')
},[ props.a ])
React.useLayoutEffect(()=>{
    console.log('第二个effect')
},[])
React.useEffect(()=>{
    console.log('第三个effect')
    return () => {}
},[])
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

updateQueue就是这样的

hook6.jpg

更新阶段的useEffect,调用updateEffect,updateEffect调用updateEffectImpl

function updateEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// useEffect的Update阶段
function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = updateWorkInProgressHook(); //获取hooks
  const nextDeps = deps === undefined ? null : deps; //获取依赖项
  let destroy = undefined;

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState; //获取上一次的effect
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps; //获取之前的依赖项
      if (areHookInputsEqual(nextDeps, prevDeps)) { //如果依赖项一样,更新当前effect对象就行,无需打上新的标记。
        hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;

  // 打上新的标记HookHasEffect,这样commit阶段的时候就会再执行一次。
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    destroy,
    nextDeps,
  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

如上,主要做了:

  • 判断依赖项是否一样,一样的话,更新副作用链表就可以了
  • 如果不一样,就会打上新的标记HookHasEffect,在 commit 阶段就会根据这些标签,重新执行副作用。

对于useLayoutEffect,更新阶段调用的函数也是跟useEffect一样。

function updateLayoutEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  return updateEffectImpl(UpdateEffect, HookLayout, create, deps);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

可以看到,也是调用了updateEffectImpl,只不过标记不同。

effectTag的思考
  • React 会用不同的 EffectTag 来标记不同的 effect,对于useEffect 会标记 UpdateEffect | PassiveEffect, UpdateEffect 是证明此次更新需要更新 effect ,HookPassive 是 useEffect 的标识符,对于 useLayoutEffect 第一次更新会打上 HookLayout 的标识符。

  • React 就是在 commit 阶段,通过标识符,证明是 useEffect 还是 useLayoutEffect ,接下来 React 会同步处理 useLayoutEffect ,异步处理 useEffect

  • 如果函数组件需要更新副作用,会标记 UpdateEffect,至于哪个effect 需要更新,那就看 hooks 上有没有 HookHasEffect 标记,所以初始化或者 deps 不相等,就会给当前 hooks 标记上 HookHasEffect ,所以会执行组件的副作用钩子。

  • useEffect和useLayoutEffect的处理函数是一样的,只不过入参不同。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/661181
推荐阅读
相关标签
  

闽ICP备14008679号