React 16.8.6 Hooks小結

1.useEffect 模擬 componentDidmunt:

useEffect(() => { document.title = `XXXX`; // 數據請求 }, [])

2.模擬 componentDidUpdate:

useEffect(() => { // 處理 }, [props屬性])  // 自己淺對比

3.模擬 componentWillunmunt:

useEffect(() => {

return () => { console.log('2222'); };

}, [])

注：useEffect目前不支持Pre-render lifecycle events（getDerivedStateFromProps，componentWillReceiveProps）

父級調用子級的方法：

子級(list.tsx)：

import React, { useImperativeHandle, forwardRef } from 'react'

const List: React.SFC<ListProps> = （props, ref） => {
// 某方法
const test = () =>｛
　console.log('111')
｝
// 開放Api
useImperativeHandle(ref, () => ({
  test,
}))
return (<div>我是子級</div>)

}

export default forwardRef(List)

父(index.tsx)：

import React, { useRef } from 'react'
import List from './List'

const Parent: React.SFC<indexProps> = (props) => {

let chidrenfun: React.RefObject<unknown> = useRef()

const testFun = () => {
childrenfun.current.test()  // 輸出111
}

return (
<div>
　　<div onClick={testFun}>點擊測試</div>
　　<List ref={childrenFun} />
</div>
)
}

 注： 在function組件中 useRef比createRef靠譜，useRef只會把初始渲染的實例化返回。在基於類的組件中，createRef將始終創建新的ref。