React02

 一、创建脚手架工具

      npx create-react-app 项目名

二、组件传参

  1、父传子

        1、在父组件使用子组件的地方，定义属性传参

           在子组件中使用props进行接收，类组件需要this.props

           函数组件传形参props，使用props

        2、传参类型

          --字符串，基本数据类型

          --对象{}  

          --函数

          --jsx

        3、语法

 2、子传父

        1、子组件中定义一个触发事件将值传送给父组件，

        2、在父组件使用子组件的地方定义一个带参数的函数

        3、子组件中使用this.props将实参传送给父组件

3、兄弟传参

        1、先子传父，再父传子

4、跨组件通讯

        语法：

          1、将需要接收的组件写在<Provider></Provider>中，给Provider定义value值

            例：

              <Provider value={this.state.msg}>

                <Son2/>

              </Provider>

          2、在接收数据的组件中使用<Consumer></Consumer>,将值用箭头函数的方式显示

            例：

               <Consumer>

                {value=><p>{value}</p>}

              </Consumer>

          注：两个组件之间要指向同一个React.createContext()方法

三、Refs  

    概念：

         Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建React元素

         是使用React.createRef()创建的，并通过ref属性附加到React元素

    ref属性：

      当ref属性用于html元素时，构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性

      当ref属性用于自定义class组件时，ref对象接收组件的挂载实例作为其current属性

    语法：

      1、使用React.createRef()创建的ref

        例：this.bindNum = React.createRef()

      2、在需传参的组件中使用ref属性

        例： <Text2 ref={this.bindNum}/>

      3、使用current属性获取DOM节点或组件

        例：this.bindNum.current