React 中的 Ref

类组件中的Ref   1.字符串式 2.函数式 3.createRef
函数组件中的Ref  React.useRef

类组件中的Ref ： 
    1： 字符串式    
            定义 ：ref={ "textInput" }
            使用 ：this.refs.textInput
    2： 函数式
            定义 ：ref={ (el) => {this.input = el}}
            使用 : this.input
    3:  createRef
            定义 ： constructor () {
                        super()
                        this.myRef = React.createRef() 
                    }
                    ________
                    ref = { this.myRef }
            使用 ： 
                    this.myRef.current

函数组件中的 Ref
        useRef : 
            定义 ：  let inputEl = React.useRef (初始值)
                    ref= { inputEl }
            使用 ：  inputEl.current   

React 中的 state setState

类组件 ：constructor () { 
            super()
            this.state = {
                xxx : 
            }
        }

        // 修改数据，更改视图，用 setState
        
        this.setState({

        })
        或
        this.setState({

        },callback)   
        
        // setState是一个异步函数，当我们想等待数据修改完毕后再进行一些业务逻辑时，可以通过第二个参数回调函数实现。
        // 同时，如果想实现一些批处理操作，但是直接使用this.setState，后面的会把前面的覆盖。可以使用prevState参数实现批处理
        this.setState((prevState,props)=>{
            this.state.value = prevState+1
        })
        this.setState((prevState,props)=>{
            this.state.value = prevState+1
        })
        this.setState((prevState,props)=>{
            this.state.value = prevState+1
        })

函数组件 ：let [state,setState] = React.useState() 
            // useState 返回的是一个数组，返回一个状态以及修改对应状态的方法

Super

目的是调用父类的构造函数来实例化一个子类

受控组件 和 非受控组件

表单元素的数据来自state的组件就是受控组件
否则就是非受控组件
另外，受控组件除了绑定value之类的属性之外，还需要配合 onChange 事件。
如果只想显示默认值的话可以用defaultValue / defaultChecked 这样的方式实现

React 脚手架的创建

npx create-react-app 名称

import 和 export

当暴露为export default {} 时
    import A from 'xxx'      可以直接获取
    import * as A from 'xxx'   A.default.xx获取
    import { xx as xxx} from 'xxxx'  xxx获取
    还可以在export 时，a as b
当暴露为 export {} 时 ，
    import A from 'xxx'  直接获取
    import * as A from 'xxx'  A.xx获取

路径问题

当我们在路径中直接写引用的其他文件的路径时候，上架到服务器后可能会出现找不到路径的问题，
解决这种问题，可以用 把文件当成一个模块引入的方式来解决
1. import
2. require

import 和 require的区别

即静态引入 和动态引入的区别
import 静态引入 需要写在文件的最前面，不能写于业务逻辑中。
require 动态引入 不必写在文件的最前面，可以在某些业务逻辑中决定是否引入。