react函数组件

  react函数组件
      函数组件需要使用react中hook
      1 state数据存储  需要使用hook里边的useState
        1 引入useState
        import {useState} from 'react'

        2 在函数组件中直接去 定义state
        const [num, setNum]=useState(初始值)   // 初始值可以是所讲 基本类型或者引用类型

        3 插值使用时候 直接写 {num}

      2 函数组件事件绑定
        函数组件中事件绑定需要使用箭头函数
        格式:
          <元素标签 onClick={()=>自定义方法名(传递的参数)}></元素标签>

          function 自定义方法名(形参) {
            // 执行代码块
          }

      3 在自定义的组件标签中 我们可以编写内容 同时正常显示内容
        1 在组件中直接写上内容
          <自定义组件标签名>内容</自定义组件标签名>

        2 在子组件的模板中 使用{props.children}来获取插入的内容

      4 组件传值
        1 父组件向子组件传值
          1 在父组件中找到子组件的标签  在标签上边写上自定义属性名={要传递的数据}
           <子组件标签 自定义属性名={要发送的数据}></子组件标签>
           
          2 在子组件的模板中 函数需要接受一个参数 props  使用{props.自定义属性名}获取 父组件传递给子组件的数据
          function 子组件(props) {
            return (
              <div>{props.自定义属性名}</div>
            )
          }

        2 子组件向父组件传值
          1 在子组件中 自定义事件 props.自定义属性名(要发送的数据) 发送我们数据
          <button onClick={()=>自定义方法名1()}></button>

          function 自定义方法名1() {
            props.自定义属性名(要发送的数据)
          }
          2 在父组件中找到子组件的标签  在标签上编写上 自定义属性名={新的方法名}
          <子组件标签 自定义属性名={新的方法名}></子组件标签>

          function 新的方法名(data) {
            // data就是子组件传递来的数据
          }
      
        3 非父子组件传值
          间接传值
          useContext
          redux

        4 useContext使用
          场景： 可以实现非父子 只能是自上而下的传递
          1 创建context.js文件 
          import React from 'react'
          const MyContext = React.createContext();

          export default MyContext
          2 需要发送数据的组件中使用  MyContext.Provider发送数据
          import MyContext from './context'

          <MyContext.Provider value={要发送的数据}>
            <子组件></子组件>
          </MyContext.Provider>

          3 在需要接受数据的组件中 引入MyContext
          import MyContext from '../context'
          import {useContext} from 'react'

          function 组件名() {
            const data=useContext(ThemeContext);
            return (
              <div>{data}</div>  // data传递过来的数据
            )
          }