Reactnative Hook学习

hook：函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。

React Hooks约定，钩子一律使用use前缀命名。所以，自己定义的钩子都要命名为useXXX。

常用四种hook：

useState()

useCOntext()

useEffect()

useReducer()

1、useState()状态管理

const  [ xxx,setXxx]=React.useState(initValue)

2、useContext()共享状态

3、useEffect()副作用，模拟类组件中的生命周期，类似回调

类组件在绑定事件、解绑事件、设定定时器、查找 dom 的时候，是通过 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期来实现的，而 useEffect 会在组件每次 render 之后调用，就相当于这三个生命周期函数，只不过可以通过传参来决定是否调用。

useEffext(() =>{},[statevalue])

里面两个参数，第一个参数是要进行的异步操作，第二个参数是一个数组，决定是否调用取决于第二个参数

1）、什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate

useEffect(() =>{})

2)、传入一个空数组[],只会在组件挂载后调用一次，相当于 componentDidMount 和 componentWillUnmount

useEffect(() =>{},[])

3)、传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行

useEffect(() =>{},[statevalue]),当statevalue变化时，才执行此函数

例如：

1、类似于componentDidMount的useEffect

const demo = ()=> {

useEffect=(() => {

//类似componentDidMount，通常在此调用api获取数据

},[])

} 

2、类似于componentWillUnmount的useEffect

const demo=() => {

useEffect(() => {

return () => {

//类似于componentWillUnmount，通常用于清除副作用

}

},[])

}

3、类似于componentDidUpdate的useEffect

const demo = () => {

const [ count, setCount]=useState(0);

useEffect(() => {

//当count改变时，执行当前代码

},[count]) 

}

4、useReducer()Action管理

redux我们都知道，其原理是通过用户在页面中发起action，从而通过reducer方法来改变state，从而实现页面和状态的通信。

（state,action） => newstate

const [ state,dispatch] = useReducer(reducer,initialState)

reducer函数 和 状态的初始值 作为参数,返回一个数组,其中第一项为当前的状态值，第二项为发送action的dispatch函数

const reducer = (state,action) =>{

//逻辑

if(action.type==='add'){

return {

...state,count: state.count+1

}

}else{

rturn state

}

}

const addcount =() =>{

dispatch({

type:'add'

}

)

}

const [state,dispatch] =useReducer(reducer,{count:0})