|
REACT HOOKS快速学习
解决什么问题？ 1、函数组件无法使用state 2、没有副作用 数据订阅、获取、手动修改React DOM称作副作用，class组件需要使用componentDidMount、componentDidUpate、componentWillUnmount生命周期实现！useState 3、有状态组件逻辑重用问题 以前封装公用组件，或者可复用业务逻辑时需要使用class组件，hooks可以轻松实现 --- 代码复用问题（推荐一个库：www.hooks.guide）！ useEffect 4、复杂状态管理问题 以前我们使用react，对于复杂状态管理需要使用第三方的管理器（dva/redux/mobx）,hooks为我们提供了useRededucer、useContext 等API 5、效率和质量问题 采用纯函数开发、相比于臃肿class组件开发体验更爽、效率更高 API上手 1、useState -- 组件状态管理 ======================================================================================= 基本结构 const [state,setState] = useState(initState)useState是一个高阶函数， 接受一个参数 initState 初始化的state,任何数据类型都可以！也可以是一个回调函数，但是必须要有返回值。 返回数组，第一个为你需要设置的 状态state; 第二个为更新状态state的方法! 随意命名 例子 import { useState } from 'react';
const App = () =>{
const [initCount,setCount] = useState(0);
// 传函数
// const [initCount,setCount] = useState(()=>return 0);
return (
<div>
// 显示时为0
<span>这是你初始化的状态state为 { initCount } </span>
// 做一个点击事件让点一次 initCount +1
<button onClick={ () => setCount(initCount+1) }> 加一 </button>
</div>
)
}关于事件传参 1、onClick = { ()=>this.事件名（参数） } 写一个箭头函数的原因是“去除箭头函数下，函数就执行了” 2、onClick = { this.事件名.bind(this,参数) } 2、useEffect -- 副作用处理 ======================================================================================= useEffect 处理副作用，同时也是componentDidMount、componentDidUpate、componentWillUnmount三个周期函数的统一 基本结构 useEffect(callback,array) callback用于处理业务逻辑的回调函数 array控制函数执行,有三种情况 空数组时只在render(){}时执行一次,相当于 componentDidMount 周期函数 数组中有值的情况，useEffect函数会在array数组中值改变时执行 第二个参数可以不填写，那么每次render都会执行useEffect函数 例子 import { useState, useEffect } from 'react';
const App = (props) => {
const [initCount,setCount] = useState(0);
useEffect(()=>{
// 写你的处理逻辑,代码块
//你也可以返回一个清理函数
return ()=>{
// 清理的代码块
}
},[]);
return (
<div>
....
</div>
)
}3、useContext -- 状态管理 ======================================================================================= Context（上下文）react提供来实现数据共享的API，可以解决多层props传递的问题 基本结构及例子 1、通过React.createContext()创建Context对象 const Context = React.createContext() 2、使用Context.Provider包裹组件，给他的后代提供数据 <Context.Provider value = { store }>
<ChildComponent>
</Context.Provider>3、通过Context.Provider包裹的所有后代组件，都可以使用Context.Consumer获取Context数据 // ChildComponent 组件中
<Context.Consumer>
{ value => {
console.log(value) // 这个value就是context共享的数据，则是store
} }
</Context.Consumer>更改上面的步骤 react中可以直接使用 useContent(context) 高阶函数，这样将不需要Provider和Consumer; 当最近的context更新时，那么context的hooks 将会重新渲染 基本使用 const Context = React.createContext({ name:"mire.li" })
// 组件1中
const App = () => {
const conText = useContext(Context)
const { name } = conText
return (
<div>
{ name } // mire.li
</div>
)
}
// 组件2中
// 使用方式同上，别问分开写的组件怎么用，传一个参数就好了4、useReducer -- 复杂状态管理 ======================================================================================= useReducer 是useState 的一种变体 接受三个参数，返回一个数组有 state 和 setState 基本结构 const [ state, dispath ] = useReducer(reducer,initalState,initalAction) 参数 // reducer是一个函数，处理action并更新state // initalState 是初始化state // initalAction 是初次执行useReducer时被处理的action 返回值 // state状态 // dispath更新state的方法，接受action作为参数 使用方法 使用useReducer更新state,只需要调用dispath并传一个action dispath({ type:"reset" }) // dispath 用于更新state,当dispath被调用时，renducer方法会被调用，会根据action描述法更新state 参数讲解 1.1 aciton 实质上是一个对象（object),通常有一个type属性；用于描述如何去更新state,还可以携带一些参数； const action = {
type:"increment", // 增加state值
paylod:{
other:"value" // 携带其他参数
}
}action完后交给reducer函数处理了 1.2 reducer本质是一个函数，处理action，并返回新的state; 其实就是action的一个翻译官 基本结构 (state,action) => newState 例子 const initalState = { count:0 } // 初始化state
const reducer = (state,action) => { // 数据处理
switch(action.type){
case:"reset" :
return initalState;
case:"increment":
return { count:state.count + 1 };
default
return state;
}
}
//组件
const child = () => {
const [state,dispath] = useReducer(reducer,initalState);
const { count } = state;
return (
<div>
<span>当前状态为 { count } </span>
<button onClick={ () => dispath({ type:"reset" })}>重置</button>
<button onClick={ () => dispath({ type:"increment" })}>加一</button>
</div>
)
}这里可以结合useContext实现Redux的功能，试一下你会怎么做呢？ 2019年07月20日 20:09分 关于hooks基础用法暂时更新到这儿，后面还有部分进阶下期更新 可添加微信 17738775404 交流学习 李子烨 |
|
|
公众号
