React 函数组件

创建

const MyComponent = (props) => {
    return <div>{props.message}</div>
}
const MyComponent = props => <div>{props.message}</div>
function MyComponent(props){
    return <div>{props.message}</div>
}

使用 useEffect 模拟生命周期

使用 useEffect 模拟生命周期，取决于第二个参数

• componentDidMount： 第二个参数为空数组

  useEffect(() => {console.log('componentDidMount')}, [])

• componentDidUpdate：

第二个参数不传则所有属性更新时都执行函数，传一个数组则数组内数据更新时执行函数，但是该在第一次渲染时也会执行

useEffect(() => {console.log('任意属性更新')})
useEffect(() => {console.log('m 与 n 更新')}, [m, n])

封装组件，使得第一次渲染时不执行函数，完全模拟 componentDidUpdate：

const useUpdate = (fn, dep) => {
    const [count, setCount] = useState(0);
  useEffect(() => {
      setCount(x => x + 1); // 或 setCount(count + 1)
  }, [dep]);
  useEffect(() => {
      if (count > 1) {
        fn();
    }
  }, [count, fn]);
};
export default useUpdate;

• componentWillUnmount

  useEffect(() => {
    console.log('componentDidMount');
  return () => {
      console.log('componentWillUnmount')
  }
  })

• shouldComponentUpdate：使用 React.memo, useMemo 解决

• constructor：函数执行时相当于 constructor
• render：函数返回值就是 render 的返回值