读懂react源码

2019-11-06

1、最重要的两个目录，react，react-dom，（react-reconciler后续会很重要）

2、使用flow检查js的类型

3、react.createElement(type, props, children)

4、createElement 源码在ReactElement.js里，最终会

return element = {

    // This tag allows us to uniquely identify this as a React Element

    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element

    type: type,

    key: key,

    ref: ref,

    props: props,

    // Record the component responsible for creating this element.

    _owner: owner,

  };

5、createref，ref的三种形式，

    字符串形式：<input ref="inputref">

　 回调用函数形式：<input ref={(input)=>{this.inputref=input}}>

　 createRef形式：constrotor(){this.inputref = React.CreateRef();} <input ref = {this.inputref}>

　用法上，createRef，创建的ref取组件时多了一层current，例如this.inputref.current.value，回调和字符串形式的会直接使用this.inputref.value

6、React.forwardRef(props, ref=>{return <input />}) 可以创建一个带有ref的函数组件

7、通过context实现祖孙之间传递参数

react 17版本之前的写法：

parent.childContextTypes={

　　

　　value: PropTypes.string,

  　a: PropTypes.string,

}

Child.contextTypes={

　　

value: PropTypes.string,

  a: PropTypes.string,

}

react17之后的写法

最上层的组件必须提供provider   

const { Provider, Consumer } = React.createContext('default')

 

自组件可以通过this.context.。。。。。。来访问

如果在provider上，可以通过{value=>{<div>value</div>}};

context里的provider和cosumer必须是一对，可以使用一个文件专门来创建