React Hooks

---

前言

关于React Hooks的学习。

---

一、useState

import { useState } from 'react'
const [count, setCount] = useState(0) 
 // 数组解构，0是初始值，变量为count，setCout为改变count的方法

二、useRef

可以用于获取JSX语法中的DOM元素。也可以用于保存变量。

import { useRef } from 'react'
const ele = useRef(null)

<input ref= {ele} > </input> // ele即为input元素 

三、useEffect

 useEffect(() => {
 		console.log('初始化打印');
		return ()=>{
			console.log('在销毁时会执行return中的方法。')
		}
	}, [])
  // 没有第二个参数，组件渲染、卸载、值的改变都会触发。相当于componentDidMount、componentUpdate和componentWillUnmount
  // 第二参数为空数组，仅在渲染和卸载时触发。相当于componentDidMount和compnentWillUnmount
  // 第二个参数为有的值的数组，仅在数组里面的值改变时会触发函数。相当于componentUpdate
  //　第一个函数若有return的函数，在组件销毁时会执行这个return的函数

四、useContext

useContext组件主要用来共享组件状态。使用实例出来的对象上的Provider组件包裹。在子组件中使用useContext来接收。
父组件中

import { createContext } from 'react'
export const MyContext = createContext();
// 在需要传递值得地方使用MyContext.Provider组件包裹，使用value属性传递值。
<MyContext.Provider value={{name:'李四'}} >
   <Message></Message>
<MyContext.Provider>

子组件中

//在Message组件中可以使用useState()来接收
import { useContext } from 'react'
import { MyContext } from 'MyContent的路径'
const { name } = useContext(MyContext)

<Message>
   <div>姓名：{name}</div> // 显示李四
</Message>

五、useReducer

import { useReducer } from 'react';
const [ count, dispatch ] = useReducer((state, action)=>{
switch(){
     case 'add':
           return state+1
    case'add':
    	   return state-1
	default：
		   return state 
}
}，0)
// 第二个参数表示第一个参数的函数的state的初始值为0，第二个参数为action（type，payload）。
// 数组解构出的count为经过dispatch调用action中type中的方法名处理后返回的值，即return的值。
// 调用时直接使用dispatch（‘case对应的字符串’）

六、useContext和useReducer实现redux

1.1、 首先使用crateContent准备好共享的数据
1.2、其次要准备好使用的常量字符串（type对应的方法名）和对应的reducer函数（改变数据的逻辑）

import { createContext, useReducer } from 'react'
export const MyContext = createContext()

export const CHANGE_NAME = 'CHANGE_NAME'
const reducer = (state, action) => {
	switch(action.type) {
  	case CHANGE_NAME :
  		return action.state
  	default:
  		return state
 	}
 }

export  const  Value =(props)=>{

const [ state, dispatch] = useReducer(reducer, '张三') //初始值为张三，


return (
  <MyContext.Provider value={{ state，dispatch }} >  // 把数据和dispatch中的方法共享出去
  		{ props.children }
  </MyContext.Provider>
  )
} 

2、在需要使用数据的地方导入Value组件，并使用Value组件包裹需要数据的组件

import { Value } from '此组件的路径'；
<Value>
	<Message></Message>
</Value>

3、在被包裹的子组件中使用useContent拿到数据,

import { useContext } from 'react'
import { MyContext } from 'MyContext 的路径'
function Message() {
  		const { name } = useContext(MyContext)
  		return( <div>名字：{ name } </div> )
  }

4、在需要使用方法改变数据的地方使用useContext导出dispatch。传入对应的type和入参

import { useContext } from 'react'
import { MyContext, CHANGE_NAME } from 'MyContext 的路径'
function Message() {
   	const { dispatch } = useContext(MyContext )
 		return( <button onClick= {（）=>{  dispatch(type:CHANGE_NAME ,name:'王麻子')  }}  >传递一个可以改变名字的数据过去</button> )
 }

5、所以在4中改变name的值，在3中会得到变化。

七、useMemo

主要对于计算后的一个值。返回一个具体的值。
问题？
每次页面重新渲染时，都会使组件里面的方法或计算来的值重新执行一遍，很耗性能，此时就可以使用useMemo和useCallback来优化。
主要作用是用于性能优化，用作缓存。如果一些值的计算量很大，比较耗时，会可以使用useMemo来做一缓存，只有依赖的值变化时，才会重新计算，而不是每次渲染页面都重新计算。

八、useCallback

主要对于一个函数。返回一个函数。
主要用于性能优化。对于需要传递函数给子组件的场合，不使用useCallback的话，子组件每次都会重新渲染。