了解 React 之 hooks（一）
- 前言
- useState
- useEffect
- useContext
- useReducer
前言
在 React 中使用 class 繼承 React.Component，就可以在類里面使用各種各樣的鉤子函式，比如 componentWillMount、componentDidMount、componentWillUnmount 等，你也可以直接寫 function 來構建 reander 方法，但是就無法使用鉤子函式，無法使用 setState 修改狀態，在 React 16 版本之后新增了 hooks 特性，hooks 特性的主要表現形式為：在 React 中可以直接使用函式的形式來完成所有組件邏輯，
useState
useState 方法是用來修改資料狀態，
import React,{useState} from 'react';
import ReactDOM from 'react-dom';
function App() {
const [count,setCount]=useState(0);
return <div onClick={setCount(count+1)}>
{count}
</div>
}
ReactDOM.render(<App />, document.getElementById('root'));
以上案例中沒有使用 class 的形式，也沒有繼承 React.Component，但是可以使用 useState 來達到修改狀態的目的，其中定義了 count 變數和 setCount 方法， useState 陣列后面的元素是 count 的初始值，setCount 方法是修改狀態，類似于 setState，
那么如果需要使用 componentDidMount 函式，調取介面資料怎么辦呢？
useEffect
useEffect 方法是用來執行 DOM 掛載或者更新之后的事務，
import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
function App() {
const [users,setUsers]=useState({});
useEffect(()=>{
axios.get('/login').then(res=> {
setUsers(users=> ({
users:res.data.result
}));
},{})
return <div>{{users.name}} </div>
}
ReactDOM.render(<App />, document.getElementById('root'));
useEffect 方法可以替代 componentDidMount 和 componentDidUpdate，可以在 useEffect 中調取介面資料，然后更新 state，
useContext
useContext 方法是用來共享資料，跨組件傳值，
import React,{useContext} from 'react';
import ReactDOM from 'react-dom';
function ShareContext() {
const Context = React.creatContext({loading: false});
return Context;
}
import Context from 'ShareContext';
function Item() {
const ctx = useContext( Context );
return （
<div>
{ctx.loading && ‘Loading...’}
</ div>
）
}
function App() {
return （
<div>
<Item/>
</ div>
）
}
ReactDOM.render(<App />, document.getElementById('root'));
useContext 方法與之前的 context 屬性功能差不多，只不過寫法要簡潔很多，以上流程為：先寫一個共享的 Context 資料，然后其他組件通過 useContext 方法獲取組件中的值，但是這種方法只能共享狀態，沒法修改共享的狀態，如果想要修改共享的狀態可以使用 useReducer，類似于 Redxu 的功能，
useReducer
useReducer 用于復雜的狀態管理，
import React,{useReducer} from 'react';
import ReactDOM from 'react-dom';
const initState = {count:0};
const reducer = (state,action)=>{
switch(action.type){
case 'add':
return state.count++;
case 'reduce':
return state.count--;
default:
throw new Error();
}
}
function App() {
const [ state, dispatch ] = useReducer(reducer,initState);
return <div>
<div>{state.count}</div>
<div onClick = dispatch({type:add})>+</div>
<div onClick = dispatch({type:reduce})>-</div>
</div>
}
ReactDOM.render(<App />, document.getElementById('root'));
useReducer 方法接收三個引數，第一個引數是修改 action 的 reducer，第二個引數是初始狀態，第三個引數是useReducer 初始執行時被處理的 action，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/233138.html
標籤：其他