您当前的位置:首页 > 网站建设 > React
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

读懂react源码

51自学网 2020-03-07 13:59:37
  React

读懂react源码

 

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实现祖孙之间传递参数

parent.childContextTypes={

  value: PropTypes.string,

   a: PropTypes.string,

}

Child.contextTypes={

value: PropTypes.string,

  a: PropTypes.string,

}

最上层的组件必须提供provider   

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

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

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


下载地址:
从零开始使用React全家桶开发电商系统
React Refs
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1