一般来说，能用函数组件就用函数组件，相比于class组件，函数组件语言简洁，消除了this，更加简单易懂。

创建React函数组件

  1. const hello = (props) =>{
  2.     return ({
  3.         <div>{props.name}</div>
  4.     })
  5. }
  7. function hello(props){
  8.     renturn ({
  9.         <div>{props.name}</div>
  10.     })
  11. }

函数组件代替class组件

面临的问题

  • 没有state
    通过react hooks来解决这个问题
  • 没有生命周期
    useEffect可以解决这个问题

模拟生命周期

  1. useEffect(()=>{
  2.     ...
  3. },[])
  4. //[]空数组是useEffect的第二个参数，表示只在第一次渲染执行箭头函数中的内容，模拟了componentDidmount的生命周期
  5. //第二个参数中有变量例如[n],[m],[m,n]等，表示会在变量变化的时候执行useEffect函数(首次渲染也会触发，需要自定义)，[m,n]是在m或n变化的时候执行函数，模拟componentDidUpdate
  6. //当不写第二个参数，且在useEffect函数中return一个函数时，可以模拟componentWillUnmount
  9. //自定义模拟componentDidUpdate
  10. const useUpdate = (fn,dep)=>{
  11.     const [count,setCount]=useState(0);  
  12.     useEffect(()=>{
  13.         setCount(x=>x+1);    //计数，数次渲染和之后渲染都会造成count+1
  14.     },[dep]);
  15.     useEffect(()=>{
  16.         if(count>1){
  17.             fn();            //除初次渲染外，count变化就执行fn
  18.         }
  19.     },[count,fn])
  20. }
  22. useUpdate(()=>{
  23.     ...                    //n变化执行useUpadte(除初次渲染)
  24. },n)

其他生命周期：

constructor()——函数组件执行的时候，就相当于constructor

shouldCompoentUpdate()——使用React,memo和useMemo可以解决

reder()——return具有相同功能