Hook 是什么?Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。以前写react使用的是class无状态组件,现在使用hooks,其实就是在函数作用域中进行操作。所以又叫做函数式组件。
一,useState
作用:定义该函数组件的变量
参数:初始 state
返回:当前 state 以及更新 state 的函数(它的参数则是新的state值)
示例:我们不能在代码中直接修改count的值,而是应该把新的值传入setCount函数,从而返回新的count值。
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);//数组解构
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
二,useEffect
作用:你可以把 useEffect
Hook 看做 componentDidMount
,componentDidUpdate
和 componentWillUnmount
这三个函数的组合。在组件的生命周期执行函数。
1,无需清除时
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
组件的初次渲染完成会执行一次useEffect中的函数。
而后每次update都会重新执行一次useEffect中的函数。
2,需要清除时
每个 effect 都可以返回一个清除函数。当组件卸载时,如果有return,则会执行这里的代码。
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);//这里执行监听
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);//组件卸载时,执行返回的函数,不再监听
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
3,优化为没变化时不执行effect
常规使用时每次组件渲染和更新都执行effect,有时候effect依赖的内容没变化,就不需要执行,这时候,可以给effect传入第二个参数:一个数组。如果数组中有多个值,则会比较这几个值,有一个不相等则执行effect。这个数组叫依赖表,类似于vue中的computed,当依赖项发生了变化,就会执行其中的函数。
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
三,useContext
如果想要组件之间共享状态,可以使用useContext
。
React 的 Context API
是一种在应用程序中深入传递数据的方法,而无需手动一个一个在多个父子孙之间传递 prop
。
当组件上层最近的 <MyContext.Provider>
更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext
provider 的 context value
值。
也就是说父组件必须先声明 Provier
组件,并声明 value
属性。
import React,{useContext} from 'react';
import './App.css';
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider , Consumer}
function App(){
//使用Provider为所有子孙提供value值
return (
<numberContext.Provider value={520}>
<div>
<ShowAn />
</div>
</numberContext.Provider>
)
}
function ShowAn(){
//使用Consumer从上下文获取value
//调用useContext,传入从React.createContext获取的上下文对象。
const value = useContext(numberContext);//这里就可以直接取到父组件传进来的值了
return(
<div>
the answer is {value}
</div>
)
}
export default App;