setState
`this``.setState({`
` ``count: ``this``.state.count + 1`
`}, () => {`
` ``console.log(``this``.state.count); ``// 这里是监控到的最新值`
`})`
useState
`const [ count, setCount ] = useState(0);`
`setCount(1);`
useEffect 上面例子中,useState()用来生成一个状态变量(data),保存获取的数据;useEffect()的副效应函数内部有一个 async 函数,用来从服务器异步获取数据。拿到数据以后,再用setData()触发组件的重新渲染。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;
Effect Hook 相当于componentDidMount、componentDidUpdate和componentWillUnmount的组合体。
默认情况下,useEffect会在第一次渲染之后和每次更新之后执行,每次运行useEffect时,DOM 已经更新完毕。
为了控制useEffect的执行时机与次数,可以使用第二个可选参数施加控制。
- 每次执行后更新
function AComponent(props){
React.useEffect(()=>{
console.log("每次更新后对会执行");
});
}
- 某状态变化后再执行
function AComponent(props){
React.useEffect(()=>{
console.log("一次执行后,allNumber 值发生变化后会再次执行");
},[allNumber]);
}
- componentDidMount 与 componentWillUnmount 传递一个空数组([])作为第二个参数,这个 Effect 将永远不会重复执行,因此可以达到componentDidMount的效果。
useEffect可以返回一个函数,该函数将在组件被卸载时的执行,可以等效于componentWillUnmount
function AComponent(){
React.useEffect(()=>{
console.log("componentDidMount");
return function cleanup() { console.log("组件被卸载componentWillUnmount")};
},[]);
}
useRef
function AComponent(){
const blockRef= React.useRef();
return(
<div ref={blockRef} onClick={()=>{console.log(blockRef.current)}}>
useRef
</div>
)
}