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。