React_hooks

函数式组件

• 本质就是一个函数，接收一个参数 props 并返回一个 reactElement
• 函数式组件中没有this和生命周期函数,不能使用 string ref
• 尽量减少在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数

     import React from "react"
     const Name:React.FC<> = ()=>{ }
  

React hooks(钩子)

本质是一个特殊函数，使函数组件拥有类组件相似的功能-使用状态等

• React Hooks 优势
  • 简化组件逻辑
  • 复用状态逻辑
  • 无需使用类组件编写
• Hook 使用规则
  • 只在最顶层使用
  • 只在 React 函数中调用

useEffect副作用函数 （通用钩子）

````
  useEffect(()=>{}[,依赖参数])
````
是类组件componentDidMount、componentDidUpdate 和 componentWillUnmount的结合体 
- 作用： 组件每渲染一次-->自动执行函数一次
- 分类： 不需要清除、需要清除的副作用(返回值是一个函数)
- 副作用函数的第二个参数
   - 没有依赖参数:   组件渲染(首次进入dom+更新)后执行 (默认，常用)
   - 有依赖参数时:   只有依赖项发生变化，才会重新渲染、执行副作用函数 
   - 依赖参数为空数组:   只在组件挂载后时执行一次
- 应用: 获取数据; 事件监听; 操作dom; 输出日志
> 如果有多个副效应，应该调用多个useEffect
   
````
  // 鼠标追踪器
  import React,{useState，useEffect} from "react"
  const MouseTracker:React.FC = ()=>{ 
     const [positions, setPositions] = useState({x:0,y:0});
     useEffect(()=>{
        const updateMouse = (e:MouseEvent){   //监听事件的回调函数,进行更新操作
            setPositions({x:e.clientX, y: e.clientY})
        }               
        document.addEventListener("click",updateMouse); //添加监听事件
        return ()=>{
           document.removeEventListener("click",updateMouse); // 移除事件时更新值
        }
      },[])
     return(
        <p>
          x:{positions.x},y:{positions.y}
        </p>
  export default MouseTracker;
````  

useState钩子函数 声明状态

```
//点击加一按钮
import React,{useState} from "react"
const LikeButton:React.FC = ()=>{ 
     const [like, setLike] = useState(0);
     //const [状态,修改该状态的方法] = useState(初始值);
     return(
        <button onClick = {()=> { setLike(like+1)} }>
        {like}
        </button>
  )
}
export default LikeButton
```

useState 返回的 setXX方法，同样是异步方法 但不会进行对象合并

• 自定义hook

  • 鼠标定位器

      import React,{useState，useEffect} from "react"
      const useMousePosition:React.FC = ()=>{   
         const [positions, setPositions] = useState({x:0,y:0});
         useEffect(()=>{
            const updateMouse = (e:MouseEvent){   //监听事件的回调函数,进行更新操作
                setPositions({x:e.clientX, y: e.clientY})
            }               
            document.addEventListener("mouseMove",updateMouse); //添加监听事件
            return ()=>{
               document.removeEventListener("mouseMove",updateMouse); // 移除事件时更新值
            }
          },[])
         return positions
      }
      export default useMousePosition;
  

    import useMousePosition from ""
    const p = useMousePosition(); // 调用 
  

  • url加载器

     import React,{useState,useEffect} from "react"
     import axios from 'axios'
     const useURLLoader:React.FC = (url:string, deps:any[]=[])=>{   
        const [data, setData] = useState<any>(null);
        const [loading, setLoading] = useState(false);      
        useEffect(()=>{
           setLoading(true)
           axios.get(url).then(res=>{
               setData(res.data);
               setLoading(false)
           })
         },deps)              
        return [data,loading]
      export default useURLLoader;
  

    import useURLLoader from ""
    const [data,loading] = useURLLoader(url); // 调用 `
    后续操作  
  

• useRef
  作为组件实例变量，多次渲染可共享变量，so保证数据是最新的
  不会引起渲染render

• useContext
  多层间传递属性
  app中定义： export const ThemeContext = React.createContext(某样式) const App:React.FC = ()=>{ ...... return( <div #app> <ThemeContext.Provider value={某样式}> <其他标签> </ThemeContext.Provider value:> </div #app>

   ```` 
      import React,{useState，useContext} from "react"
      import ThemeContext from "..app"
  
      const App:React.FC = ()=>{
      ......
         const theme = useContext(ThemeContext)
         const style = {
              color: theme.color
          }
        ...后续操作
  
   ````
  

• 其他hook

  • useCallback
  • useReducer
    相关网站 ： usehooks