基于React版本16.4的源码解析（一）

joywek 发布于2019-08-23 10:48 / 2912人阅读

摘要：本次分析的源码采用的是的版本核心接口提供了处理的工具集我们先来看看做了什么事情即当为空时，返回不为时调用，最终返回一个数组这里说一下，可以通过传入的对所有子组件进行操作，具体使用方法看下图参数通过配合的例子把父组件的赋值给每个子组件我们先不

本次分析的源码采用的是16.4.1的版本

核心接口

React.Children

提供了处理 this.props.children 的工具集：

map

forEach

count

toArray

only

我们先来看看mapChildren做了什么事情

map: mapChildren

即当children为空时，返回null；
不为null时调用mapIntoWithKeyPrefixInternal，最终返回一个result数组.
这里说一下，可以通过传入的func对所有子组件进行操作，具体使用方法看下图参数

通过配合cloneElement的例子：

class RadioGroup extends Component {
    constructor(props){
        super(props);
    }
    renderChildren(props) {
        return React.Children.map(props.children, (child, index) => {
            if (child.type === RadioOption)
                return React.cloneElement(child, {
                    // 把父组件的props.name赋值给每个子组件
                    name: props.name
                })
            return child
        })
    }
    render() {
        return (
            
                {this.renderChildren(this.props)}
            
        )
    }
}

forEach、count、toArray我们先不看，先看下only

only: onlyChild

看注释就能明白了
这个函数会返回第一个children，同时通过isValidElement判断是不是唯一的一个，若不是会报错

因为若只有一个那一定是一个Object对象，否则为一个数组
所以可以通过判断是否为children是不是一个Object对象
我们来看下函数验证一下

果然有个一判断是否为Object的条件，剩下两个是判断是否为null和$$typeof是否为element

React.createRef

照旧看下源码

这里发现用了Object.seal方法来封闭了refObject，即阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变，这里说下不可变（immutable）对象的几个好处：

线程安全

易于理解

比可变对象有更高的安全性

createRef是React 16.3 发布的方法
同时还有一个用于高阶组件的forwardRef
基本原理是通过劫持ref并且将之转换成prop实现的
具体使用如下

function HOC(WrappedComponent) {
    class HOC extends React.Component {
        constructor(props){
            super(props);
        }
      render() {
        const {forwardedRef, ...rest} = this.props;
        return ;
      }
    }
    return React.forwardRef((props, ref) => {
        return ;
    });;
}
class Child extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      return 
    }
}
const LogProps = HOC(Child);

class Father extends React.Component{
    constructor(props){
      super(props);
      this.myRef = React.createRef();
    }
    componentDidMount(){
      console.log(this.myRef.current);
    }
    render(){
      return 
    }
}

React.Component 和 React.PureComponent

这里是Component

这里是PureComponent

这里是ComponentDummy

这里发现setState 和 forceUpdate方法挂在Component下，通过一个ComponentDummy的“伪组件”来当作中介，使PureComponent也能访问到setState 和 forceUpdate方法。
细心的可能发现这里有个objectAssign方法，这个方法把Component的原型跟PureComponent的原型合并了，也就是说PureComponent和Component共用了一个原型

这里的shouldUseNative()是对原生的assgin方法进行兼容性判断，我把源码贴出来，有兴趣的可以看看

createFactory: createFactoryWithValidation

createElement: createElementWithValidation

在最后我们可以看到有一个判断type === REACT_FRAGMENT_TYPE，这个REACT_FRAGMENT_TYPE是一个可以包裹碎片化元素的组件
用React.Fragment包裹碎片化的组件，可以写作

  <>
    ...
  
  但可能有的编译器不支持，最好写作
  
    ...

看到现在都没发现render方法的踪影，源码还没读完......

云服务器 GPU云服务器 React 源码 React源码 webrtc下载旧版本的源码 webrtc各个版本的源码下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96705.html

浅谈React Fiber

摘要：因为版本将真正废弃这三生命周期到目前为止，的渲染机制遵循同步渲染首次渲染，更新时更新时卸载时期间每个周期函数各司其职，输入输出都是可预测，一路下来很顺畅。通过进一步观察可以发现，预废弃的三个生命周期函数都发生在虚拟的构建期间，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段时间准备前端招聘事项...

izhuhaodev 2019-08-26 10:43 评论0 收藏0
捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
React 源码漂流（一）之起航

摘要：在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前版本号。注意包文件仅仅是的必要的功能性的定义，它必须要结合一起使用下是，原生环境下是。在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前 React 版本号 16.8.6。注意：react 包文件仅仅是 React components 的必要的、功能性的定义，它必须要结合 React...

Mr_zhang 2019-08-26 10:20 评论0 收藏0
精读《React16 新特性》

摘要：引言于发布版本，时至今日已更新到，且引入了大量的令人振奋的新特性，本文章将带领大家根据更新的时间脉络了解的新特性。其作用是根据传递的来更新。新增等指针事件。 1 引言于 2017.09.26 Facebook 发布 React v16.0 版本，时至今日已更新到 React v16.6，且引入了大量的令人振奋的新特性，本文章将带领大家根据 React 更新的时间脉络了解 React1...

Nosee 2019-08-23 13:58 评论0 收藏0
scheduler 源码

摘要：布尔型，表示该帧里面没有执行回调，超时了。这一处理机制在监听函数中实现作为，接受消息的时机将随着线程的空闲程度起变化。为什么是要有scheduler 首先要从js的是单线程模型来说起,Javascript执行是会经历静态编译，动态解释和事件循环做任务调度的过程，大致的流程如下(注意，该流程是以chrome浏览器内核为标准的执行流程，在node或者其他浏览器中，执行流程会有所差异，但是...

SillyMonkey 2019-08-23 15:54 评论0 收藏0