重温react的api

自学react把React的官方文档看了好多遍，再来温习一下api吧。

组件

Component，PureComponent，memo，forwardRef，lazy，Suspense，Fragment，Profiler，StrictMode

工具

createElement，cloneElement，createContext，createRef，isValidElement，children - map;forEach;count;toArray;only

React.createElement(
  type,
  [props],
  [...children]
)
// 经过createElement处理，最终会形成 $$typeof = Symbol(react.element)对象。对象上保存了该react.element的信息。

hook

useState，useReducer，useImperativeHandle，useMemo，useRef，useEffect，useDebugValue，useTransition，useContext，useCallback，useLayoutEffect

// useImperativeHandle配合 forwardRef自定义暴露给父组件的实例值。
// 模拟场景，用useImperativeHandle，使得父组件能让子组件中的input自动赋值并聚焦。
function Son (props,ref) {
    console.log(props)
    const inputRef = useRef(null)
    const [ inputValue , setInputValue ] = useState('')
    useImperativeHandle(ref,()=>{
       const handleRefs = {
           /* 声明方法用于聚焦input框 */
           onFocus(){
              inputRef.current.focus()
           },
           /* 声明方法用于改变input的值 */
           onChangeValue(value){
               setInputValue(value)
           }
       }
       return handleRefs
    },[])
    return <div>
        <input
            placeholder="请输入内容"
            ref={inputRef}
            value={inputValue}
        />
    </div>
}

const ForwarSon = forwardRef(Son)

class Index extends React.Component{
    cur = null
    handerClick(){
       const { onFocus , onChangeValue } =this.cur
       onFocus()
       onChangeValue('let us learn React!')
    }
    render(){
        return <div style={{ marginTop:'50px' }} >
            <ForwarSon ref={cur => (this.cur = cur)} />
            <button onClick={this.handerClick.bind(this)} >操控子组件</button>
        </div>
    }
}

react-dom

render,hydrate,unstable_batchedUpdates,flushSync,findDOMNode,unmountComponentAtNode,createPortal

非常规的事件中，批量更新功能会被打破，使用unstable_batchedUpdates可以来进行批量更新

参考

React全部api解读+基础实践大全(夯实基础万字总结)