受控组件和非受控组件

一般针对与表单组件，非受控就是不受程序员控制，受控是需要程序员进行一个赋值如 <input value="" onChange={inputChange}/> 需要手动将值赋值

useState

类似与vue的双向绑定，数据改变页面会重新渲染 const [count,setCount] = useState(0) 其中初始赋值只会渲染一次，后续组件重新渲染不会再赋予初始值可以传函数，但是必须是纯函数。

useEffect

类似于vue的onMount useEffect(()=>{},[]),依赖项为空数组时，和onMount几乎一样，有依赖项，则表示依赖项的一个变化，那么重新执行函数。

useCallback

缓存函数，重新渲染组件，组件函数会重新渲染，影响性能，于是可以用useCallback包裹函数，该函数将会被缓存，不会重新渲染，但是一旦里面涉及到依赖项，那么此时用到的依赖项也是第一次的，这里涉及了react的一个切片(闭包)，每一个的useState相当于一个切片，如果你想拿到useState的最新内容，可以把该数据放到依赖项中。一般函数都用其包裹起来，注意依赖项。 useCallback(()=>{},[])

useRef

当数据不需要react处理，值改变不需要重新渲染，脱离react控制可以用useRef声明 let count = useRef(1)可以直接对其修改不需要setCount()

另外当需要获得dom元素时，可以

<div ref = {refDom}/>
const refDom = useRef(null)

forwardRef

高阶组件，接收一个组件作为参数，返回一个新的组件,forwardRef给函数扩展了一个属性，叫做ref属性,作为第二参数，而且这时ref你可以用来传递任何你想要传递的数据。

给子组件挂ref，是要求子组件去追加forwardRef的，同时，forewardRef会将得到的这个ref属性通过第二个参数传递给真实的函数组件。（react设计理念是保持组件参数props的纯净，参数改变函数重新渲染，所以放到第二个参数）。

function forwardRef(Component){
    return function(props){
        const {ref,...realProps} = props
        return Component(realProps,ref)
    }
}

//父组件
const testData = ref(null) //取子组件的dom，可赋值传数据
<test ref={testData}/>
//字组件
function test(props,parents){
    retrun(
        <div ref={parents}/>  //如果不绑定ref取dom,此时parents父传过来的数据
    )
}

useImperativeHandle

参数1：ref父组件挂载的子组件参数

参数2：返回值为ref.current，父组件会拿到数据

参数3：依赖项，不变则ref.current不会重新赋值

useImperativeHandle(ref,()=>{},[])

react的API学习记录1