React解密：React关键核心fiber是什么:

React Fiber是个什么东西呢？官方的一句话解释是“React Fiber是对核心算法的一次重新实现”。
为了将任务拆解成单元，我们需要fiber，fiber从某种意义上说就是一个工作单元。

https://blog.csdn.net/leelxp/article/details/108055446

https://zhuanlan.zhihu.com/p/26027085

在开篇说这些，就是想说一下自己经历这段时间学习 React 的源码得到的一些新的。阅读源码并不只是让你深入的理解一个框架的运作原理，更能让你在一些实现方案上学习到一些更优的方法。

在编程世界，我们如果不精进就是退步，不是么？
回到主题，我总结了一下要理解 React 原理最核心的部分：

更新机制
什么是Fiber以及作用
React 实现路更新任务的调度，如何实现的
React 的调度过程
以及渲染更新的过程

【背景】
关于版本，本书是在React16+的基础上写的，React16相较于之前的版本是核心上的一次重写，虽然主要的API都没有变化，但是增加了很多能力。并且首次引入了Fiber的概念，之后新的功能都是围绕Fiber进行实现，比如AsyncMode，Profiler等。

const React = {
  Children: {
    map,
    forEach,
    count,
    toArray,
    only,
  },
  createRef,
  Component,
  PureComponent,
  createContext, // 超级简单又方便,如果遇到多级地狱般的this.props传值,所以推荐多级使用context。
  //使用react context的作用React.createContext:
  //https://www.cnblogs.com/seemoon/p/12888318.html
  forwardRef,// React.forwardRef的API中ref必须指向dom元素而不是React组件
  Fragment: REACT_FRAGMENT_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE, //严格模式
  unstable_AsyncMode: REACT_ASYNC_MODE_TYPE, //异步模式
  unstable_Profiler: REACT_PROFILER_TYPE, // React Profiler提高性能、
  createElement: __DEV__ ? createElementWithValidation : createElement,
  cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
  isValidElement: isValidElement,
  version: ReactVersion,
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};

Children

这个对象提供了一堆帮你处理props.children的方法，因为children是一个类似数组但是不是数组的数据结构，如果你要对其进行处理可以用React.Children外挂的方法。

createRef

新的ref用法，React即将抛弃<div ref="myDiv" />这种string ref的用法，将来你只能使用两种方式来使用ref

class App extends React.Component{
  constructor() {
    this.ref = React.createRef()
  }
  render() {
    return <div ref={this.ref} />
    // or
    return <div ref={(node) => this.funRef = node} />
  }
}

Component & PureComponent

这两个类基本相同，唯一的区别是PureComponent的原型上多了一个标识

if (ctor.prototype && ctor.prototype.isPureReactComponent) {
  return (
    !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
  );
}

这是检查组件是否需要更新的一个判断，ctor就是你声明的继承自Component or PureComponent的类，他会判断你是否继承自PureComponent，如果是的话就shallowEqual比较state和props。
顺便说一下：React中对比一个ClassComponent是否需要更新，只有两个地方。一是看有没有shouldComponentUpdate方法，二就是这里的PureComponent判断

createContext

createContext是官方定稿的context方案，在这之前我们一直在用的老的context API都是React不推荐的API，现在新的API释出，官方也已经确定在17大版本会把老API去除。
新API的使用方法：

const { Provider, Consumer } = React.createContext('defaultValue')
const ProviderComp = (props) => (
  <Provider value={'realValue'}>
    {props.children}
  </Provider>
)
const ConsumerComp = () => (
  <Consumer>
    {(value) => <p>{value}</p>}
  </Consumber>
)

forwardRef

forwardRef是用来解决HOC组件传递ref的问题的，所谓HOC就是Higher Order Component，比如使用redux的时候，我们用connect来给组件绑定需要的state，这其中其实就是给我们的组件在外部包了一层组件，然后通过...props的方式把外部的props传入到实际组件。forwardRef的使用方法如下：

const TargetComponent = React.forwardRef((props, ref) => (
  <TargetComponent ref={ref} />
))

这也是为什么要提供createRef作为新的ref使用方法的原因，如果用string ref就没法当作参数传递了。
这里只是简单说一下使用方法，后面讲ref的时候会详细分析。

类型

Fragment: REACT_FRAGMENT_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,
unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,
unstable_Profiler: REACT_PROFILER_TYPE,

这四个都是React提供的组件，但他们呢其实都只是占位符，都是一个Symbol，在React实际检测到他们的时候会做一些特殊的处理，比如StrictMode和AsyncMode会让他们的子节点对应的Fiber的mode都变成和他们一样的mode

createElement & cloneElement & createFactory & isValidElement

createElement可谓是React中最重要的API了，他是用来创建ReactElement的，但是很多同学却从没见过也没用过，这是为啥呢？因为你用了JSX，JSX并不是标准的js，所以要经过编译才能变成可运行的js，而编译之后，createElement就出现了：
cloneElement就很明显了，是用来克隆一个ReactElement的
createFactory是用来创建专门用来创建某一类ReactElement的工厂的，

export function createFactory(type) {
  const factory = createElement.bind(null, type);
  factory.type = type;
  return factory;
}

他其实就是绑定了第一个参数的createElement，一般我们用JSX进行编程的时候不会用到这个API
isValidElement顾名思义就是用来验证是否是一个ReactElement的，基本也用不太到

⛽️React（umi、dva、react、typescript、mapbox、sockjs）

react源码(2)-基础：reactAPI