深度分析 React fiber .md

React fiber

是最新react用的算法选择,其大概的介绍点击这;

现在的局限

在现有React中,更新过程中是同步的(这个js代码的代码执行相关)

  • 同步的
  • 递归的
  • 渲染和调和

fiber 目的

  1. 中断进程,后面还可以回到进程(work)中;
  2. 为各个进程(work)分优先级;
  3. 可以再次使用之前完成的进程(work);
  4. 终止后面不再使用的进程(work);

In order to do any of this, we first need a way to break work down into units. In one sense, that's what a fiber is. A fiber represents a unit of work.

That's the purpose of React Fiber. Fiber is reimplementation of the stack, specialized for React components. You can think of a single fiber as a virtual stack frame.

In concrete terms, a fiber is a JavaScript object that contains information about a component, its input, and its output.

fiber 实现方式

破解JavaScript中同步操作时间过长的方法其实很简单——分片。

React Fiber把更新过程碎片化,每执行完一个更新过程,将控制权交给react,它会根据优先级安排下一次的任务;

维护每一个分片的数据结构,就是Fiber。

参考文件

影响

在现有的React中,每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次;在React Fiber中,不再是这样了,第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用!

Reconciliation Phase:
  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate

这些在react fiber中可能执行多次

Commit Phase:
  • componentDidMount
  • componentDidUpdate
  • componentWillUnMount

这些只能执行一次

好处:
  • 不会丢帧
  • 每一帧都分开事务
  • 事务完成时进行提交
  • 可以取消事务优先级
坏处:
  • 调试困难(react的堆栈信息本身就是反人类的)
  • 很难了解问题原因
  • 非及时更新
注意点:

fiber新的调度系统,setState都是异步的,所以:

错误的姿势

this.setState({
    a: this.state.a + this.props.b
});

正确的姿势

this.setState((a, b) => ({  
    a: prevState.a + props.b
}))
fiber 的进展:

http://isfiberreadyyet.com


欢迎start

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总以为自己是英雄 能忘乎所有的痛 给自己的理由却总是苍白的 总以为已了无牵挂 有种历经沧桑的错觉 我努力的不说话 ...
    微心诗话阅读 213评论 0 0
  • 我们经常大谈换位思考,从思考的角度去换位,很容易,并且可以侃侃而谈、高谈阔论。如此换位,恰如纸上谈兵。 要感受真切...
    烽火煤阅读 101评论 0 1
  • 或谁 在命与时里较劲 夜醉得出奇 让白鹤微醺着 叼星 风倚着月 戏云 我望着街灯 弄心 于变化里写入诗意 试探 沦...
    漫廷阅读 180评论 0 0
  • 遇见你真好 20170604 快到十一点了,要结束今天的工作了。 今天对孩子又发脾气了。只是他就是想尝试去做事情,...
    金兰幸福旅程阅读 188评论 0 1