函数式组件

函数式组件

函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用

Hook 使用规则

只在 React 函数中调用 Hook

• 只在函数组件调⽤Hooks，React Hooks目前只支持函数组件，所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
• React Hooks的应用场景在函数组件，自定义hooks
• 只在顶层调⽤Hooks Hooks的调⽤，尽量只在顶层作⽤域进行调用不要在循环，条件或者是嵌套函数中调⽤Hook，否则可能会⽆无 ，确保每次组件渲染时都以相同的顺序调⽤Hook
• 所有的 hook 必须 以 use开头

 // 开头必须是 use
function useSize(){
    return {
        w:window.innerWidth,
        h:window.innerHeight
    }
}

react hooks提供的api，大多都有记忆功能,例如

• useState
• useEffect
• useLayoutEffect
• useReducer
• useRef
• useMemo 记忆计算结果
• useCallback 记忆函数体

Hooks优势：

• 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更靠近class组件，拥抱函数式编程。
• 解决副作⽤问题，hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用，进行副作用逻辑。比如useEffect。
• 更好写出有状态的逻辑重用组件。
• 让复杂逻辑简单化，比如状态管理：useReducer、useContext。
• 函数式组件比class组件简洁，开发的体验更好，效率更⾼，性能更好。
  更容易发现无用的状态和函数。

常用 hook

• useState
  const [state, setState] = useState(initialState);
• useEffect 类组件
  componentDidMount、componentDidUpdate 和 componentWillUnmount
  需要清除的副作用

     // 挂载，更新，卸载三者合一
   useEffect(()=>{
       console.log("组件更新或者挂载");
       return ()=>{
          console.log("组件卸载")
       }
    },[age]);

// 分开写
   useEffect(()=>{
      return ()=>{
         console.log("组件挂载")
      }
   },[]);
   useEffect(()=>{
      return ()=>{
         console.log("组件更新")
      }
   },[]);
   useEffect(()=>{
      return ()=>{
         console.log("组件卸载")
      }
   },[age]);  //监听数据目标

• useRef