zoukankan      html  css  js  c++  java
  • 读懂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必须是一对,可以使用一个文件专门来创建
     
  • 相关阅读:
    为什么 PHP 程序员应该学习使用 Swoole
    如何优雅的使用和理解线程池
    Redis 数据结构-字符串源码分析
    MySQL多版本并发控制机制(MVCC)-源码浅析
    Spring事务用法示例与实现原理
    J2Cache 和普通缓存框架有何不同,它解决了什么问题?
    Spring Aop之Cglib实现原理详解
    Python中字符串拼接的N种方法
    使用Fiddler抓取到的“姐夫酷”API接口
    [Android]Space控件的应用场景
  • 原文地址:https://www.cnblogs.com/windseek/p/11805005.html
Copyright © 2011-2022 走看看