react hook有哪些

react hook有10個：1、useState，用於設定和改變state；2、useMemo，用於控制元件更新條件；3、useContext，用於元件傳值；4、useDebugValue，顯示自定義標籤；5、useCallback等等。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

React Hook是什麼？

React官網是這麼介紹的： Hook 是 React 16.8 的新增功能。它可以讓你在不寫 class 的情況下使用 state 以及其他的 React 特性。

• 完全可選的你無需重寫任何已有程式碼就可以在一些元件中嘗試 Hook。但如果你不想，你不必現在就去學習或使用 Hook。

• 100% 向後相容的Hook 不包含任何破壞性改動。

• 現在可用Hook 已發佈於 v16.8.0。

• 沒有計畫從 React 移除 class你可以在本頁底部的章節讀到更多關於 Hook 的漸進策略。

• Hook 不會影響你對React 概念的理解恰恰相反，Hook 為已知的React 概念提供了更直接的API：props， state，context ，refs 以及生命週期。稍後我們將看到，Hook 還提供了一種更強大的方式來組合他們。

---

如果對react還不夠了解建議先看下react官方文檔，寫寫demo再來看文章，因為有的react基礎的東西我就一筆帶過不細說。
react 官方文件https://zh-hans.reactjs.org/docs/hooks-state.html

React提供的Hook

##取代原來redux裡的reducer,配合useContext一起使用useDebugValue在React 開發者工具中顯示自訂hook 的標籤，調試使用。

hook	用途
useState	設定和改變state，取代原來的state和setState
useEffect	取代原來的生命週期，componentDidMount，componentDidUpdate 和componentWillUnmount 的合併版
useLayoutEffect	與useEffect 作用相同，但它會同步呼叫effect
useMemo	控制元件更新條件，可根據狀態變化控制方法執行、最佳化傳值
useCallback	useMemo優化傳值，usecallback優化傳的方法，是否更新
useRef	跟以前的ref，一樣，只是更簡潔了
useContext	上下文爺爺及更深元件傳值
useReducer

###useImperativeHandle######可以讓你在使用 ref 時自訂暴露給父元件的實例值。 ############

---

1.useState

import React from 'react';
import './App.css';
//通常的class写法,改变状态
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      hook:'react hook 是真的好用啊'
    }
  }
  changehook = () => {
    this.setState({
      hook:'我改变了react hook 的值'
    })
  }
  render () {
    const { hook } = this.state
    return(
         <header className="App-header">
          {hook}
          <button onClick={this.changehook}>
            改变hook
          </button>
        </header>
      )
  }
}
export  {App}

//函数式写法,改变状态
function App() {
//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
 const [hook, sethook] = useState("react hook 是真的好用啊");
  return ( 
    <header className="App-header">
      {hook}{/**这里的变量和方法也是可以直接使用的 */}
      <button onClick={() => sethook("我改变了react hook 的值")}>
        改变hook
      </button>
    </header>
  );
}
export  {App}

//箭头函数的函数写法,改变状态
export const App = props => {
  const [hook, sethook] = useState("react hook 是真的好用啊");
  return (
    <header className="App-header">
      {hook}
      <button onClick={() => sethook("我改变了react hook 的值")}>
        改变hook
      </button>
    </header>
  );
};

使用方法備註在上面的demo中
看完上面useState的對比使用，一個小的demo結構更清晰，程式碼更簡潔，更像寫js程式碼，運用到專案中，那豈不是美滋滋。

---

2.useEffect & useLayoutEffect

useEffect取代原來的生命週期，componentDidMount，componentDidUpdate 和componentWillUnmount 的合併版
useEffect( ()=> ;{ return ()=>{ } } , [ ])

• 第一個參數，是函數，預設第一次渲染更新時都會觸發，預設自帶一個return ，return一個函數表示可以再銷毀之前可以處理些事情
• 第二個參數，數組【】，空的時候表示只執行一次，更新時不觸發，裡面的參數是什麼，當參數變化時才會執行useEffect
  useEffect可以多次使用，按照先後順序執行
  useLayoutEffect強制useeffect的執行為同步，並且先執行useLayoutEffect內部的函數

import React, { useState, useEffect, useLayoutEffect } from 'react';

//箭头函数的写法，改变状态
const UseEffect = (props) => {
	//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊’
	const [ hook, sethook ] = useState('react hook 是真的好用啊');
	const [ name ] = useState('baby张');
	return (
		<header className="UseEffect-header">
			<h3>UseEffect</h3>
			<Child hook={hook} name={name} />
			{/**上面的变量和下面方法也是可以直接使用的 */}
			<button onClick={() => sethook(&#39;我改变了react hook 的值&#39; + new Date().getTime())}>改变hook</button>
		</header>
	);
};

const Child = (props) => {
	const [ newhook, setnewhook ] = useState(props.hook);
	//这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次
	useEffect(() => {
		console.log(&#39;first componentDidMount&#39;);
	}, []);

	//第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。
	useEffect(
		() => {
			setnewhook(props.hook + &#39;222222222&#39;);
			console.log(&#39;useEffect&#39;);
			return () => {
				console.log(&#39;componentWillUnmount &#39;);
			};
		},
		[ props.hook ]
	);

	//useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
	useLayoutEffect(
		() => {
			console.log(&#39;useLayoutEffect&#39;);
			return () => {
				console.log(&#39;useLayoutEffect componentWillUnmount&#39;);
			};
		},
		[ props.hook ]
	);

	return (
		<div>
			<p>{props.name}</p>
			{newhook}
		</div>
	);
};

export default UseEffect;

---

3.useMemo & useCallback

他們都可以用來最佳化子元件的渲染問題，或是監聽子元件狀態變化來處理事件，這一點在以前是很難做到的，因為shouldComponentUpdate 裡能監聽到是否變化，但沒法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新後執行，所以想在渲染之前做些事情就不好搞了。
useCallback目前還不能用

import React, { useState, useMemo } from 'react';

const Child = ({ age, name, children }) => {
    //在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数
    console.log(age, name, children, '11111111');
	function namechange() {
		console.log(age, name, children, '22222222');
		return name + 'change';
    }
     {/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用
    const memoizedCallback = useCallback(
        () => {
            console.log('useCallback')
        },
        [name],
      );
    console.log(memoizedCallback,'memoizedCallback')
     */}
    //useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化
	const changedname = useMemo(() => namechange(), [ name ]);
	return (
		<div style={{ border: &#39;1px solid&#39; }}>
			<p>children：{children}</p>
			<p>name：{name}</p>
			<p>changed：{changedname}</p>
			<p>age：{age}</p>
		</div>
	);
};

const UseMemo = () => {
    //useState 设置名字和年龄，并用2两个按钮改变他们，传给Child组件
	const [ name, setname ] = useState(&#39;baby张&#39;); 
	const [ age, setage ] = useState(18);
	return (
		<div>
			<button
				onClick={() => {
					setname(&#39;baby张&#39; + new Date().getTime()); 
				}}
			>
				改名字
			</button>
			<button
				onClick={() => {
					setage(&#39;年龄&#39; + new Date().getTime());
				}}
			>
				改年龄
			</button>
			<p>
				UseMemo {name}：{age}
			</p>
			<Child age={age} name={name}>
				{name}的children
			</Child>
		</div>
	);
};

export default UseMemo;

---

4.useRef

ref跟之前差不多，useRef創建–綁定–使用，三步走，詳細看程式碼以及備註

import React, { useState, useRef } from 'react';

const UseRef = () => {
	//这里useState绑定个input,关联一个状态name
	const [ name, setname ] = useState('baby张');
	const refvalue = useRef(null);// 先创建一个空的useRef
	function addRef() {
		refvalue.current.value = name;   //点击按钮时候给这个ref赋值
		// refvalue.current = name  //这样写时，即使ref没有绑定在dom上，值依然会存在创建的ref上，并且可以使用它
		console.log(refvalue.current.value);
	}
	return (
		<div>
            <input
                defaultValue={name}
				onChange={(e) => {
					setname(e.target.value);
                }}
			/>
			<button onClick={addRef}>给下面插入名字</button>
			<p>给我个UseRef名字：</p>
			<input ref={refvalue} />
		</div>
	);
};

export default UseRef;

---

5.useContext

之前使用過context的小夥伴一看就懂，useContext的話跟之前的context基本用法差不多，程式碼內有詳細註解說明，創建，傳值，使用

import React, { useState, useContext, createContext } from 'react';

const ContextName = createContext();
//这里为了方便写博客，爷爷孙子组件都写在一个文件里，正常需要在爷爷组件和孙子组件挨个引入创建的Context

const UseContext = () => {
	//这里useState创建一个状态，并按钮控制变化
	const [ name, setname ] = useState('baby张');
	return (
		<div>
			<h3>UseContext 爷爷</h3>
			<button
				onClick={() => {
					setname(&#39;baby张&#39; + new Date().getTime());
				}}
			>
				改变名字
			</button>
			{/**这里跟context用法一样，需要provider向子组件传递value值，value不一定是一个参数 */}}
			<ContextName.Provider value={{ name: name, age: 18 }}>
				{/**需要用到变量的子组件一定要写在provider中间，才能实现共享 */}
				<Child />
			</ContextName.Provider>
		</div>
	);
};

const Child = () => {
	//创建一个儿子组件，里面引入孙子组件
	return (
		<div style={{ border: &#39;1px solid&#39; }}>
			Child 儿子
			<ChildChild />
		</div>
	);
};

const ChildChild = () => {
	//创建孙子组件，接受爷爷组件的状态，用useContext,获取到爷爷组件创建的ContextName的value值
	let childname = useContext(ContextName);
	return (
		<div style={{ border: &#39;1px solid&#39; }}>
			ChildChild 孙子
			<p>
				{childname.name}:{childname.age}
			</p>
		</div>
	);
};

export default UseContext;

---

#6.useReducer

這裡的usereducer會傳回state和dispatch,透過context傳遞到子元件，然後直接呼叫state或觸發reducer，我們常用useReducer 與useContext createContext一起用，模擬reudx的傳值和重新賦值操作。

import React, { useState, useReducer, useContext, createContext } from 'react';

//初始化stroe的类型、初始化值、创建reducer
const ADD_COUNTER = 'ADD_COUNTER';
const initReducer = {
	count: 0
};
//正常的reducer编写
function reducer(state, action) {
	switch (action.type) {
		case ADD_COUNTER:
			return { ...state, count: state.count + 1 };
		default:
			return state;
	}
}

const CountContext = createContext();
//上面这一段，初始化state和reducer创建context,可以单独写一个文件，这里为了方便理解，放一个文件里写了

const UseReducer = () => {
	const [ name, setname ] = useState('baby张');
	//父组件里使用useReducer,第一个参数是reducer函数，第二个参数是state，返回的是state和dispash
	const [ state, dispatch ] = useReducer(reducer, initReducer);
	return (
		<div>
			UseReducer
			{/* 在这里通过context，讲reducer和state传递给子组件*/}
			<CountContext.Provider value={{ state, dispatch, name, setname }}>
				<Child />
			</CountContext.Provider>
		</div>
	);
};

const Child = () => {
	//跟正常的接受context一样，接受父组件的值，通过事件等方式触发reducer，实现redux效果
	const { state, dispatch, name, setname } = useContext(CountContext);
	function handleclick(count) {
		dispatch({ type: ADD_COUNTER, count: 17 });
		setname(count % 2 == 0 ? &#39;babybrother&#39; : &#39;baby张&#39;);
	}
	return (
		<div>
			<p>
				{name}今年{state.count}岁
			</p>
			<button onClick={() => handleclick(state.count)}>长大了</button>
		</div>
	);
};

export default UseReducer;

【相關建議：Redis影片教學】

以上是react hook有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！