React hooks总结

hooks

hooks介绍

• 概念：一套能够使函数组件更强大，更灵活的钩子
• 优势：告别难以理解的class、解决业务逻辑难以拆分的问题、方便状态逻辑复用
• 注意点：hooks和class写法共存、hooks只能在函数组件中使用

useState

• 作用：为函数组件提供数据状态（state）
• 语法：const [ count, setCount ] = useState(0)
  • count：数据状态、setCount：修改数据的对应方法
• 注意点：
  • useState的初始参数只会在组件首次渲染时使用，再次更新时会忽略
  • 每次通过setCount修改状态都会引起组件重新渲染
  • useState可以 调用多次，每次都是独立的
  • useState不可以在除了函数组件之外的地方，比如分支语句、循环语句、内部函数中执行
  • 如果初始值需要计算才能得到 可以使用回调函数的写法来确定useState的初始值

useEffect

• 作用：为react组件提供副作用处理

  • 什么是副作用：函数组件的主要作用就是通过数据渲染UI，除了这个之外的操作就是副作用
    • ajax
    • 手动修改dom
    • localStore操作

• 依赖项控制执行时机

  • 默认状态：首次执行 + 每次组件更新执行
  • 添加空[]：首次执行
  • 添加特定依赖 [count]：首次执行 + 依赖值发生变化执行

• 清除副作用

  • useEffect(()=> {
    	return () => {
    		// 清理副作用
    	}
    })
    

• useEffect都是在组件dom渲染更新完毕后才执行

useRef

• 作用：获取真实dom或组件实例对象
• 实现步骤：导入useRef函数，执行useRef并传入null，返回值为一个对象，内部有一个current属性存放拿到的dom对象（组件实例），通过ref绑定 要获取的元素或者组件

useContext

• 作用：在hooks下如何跨组件传递数据
• 实现步骤：使用 createContext 创建 Context对象，在顶层组件通过 Provider 提供数据， 在底层组件通过 useContext(Context) 函数获取数据
• 扩充：如果提供数据是静态不变 - index.js 包裹，如果提供过的数据需要变化 - app.js 可以方便更改数据