React Hooks

红爷發表於 2019-11-28 20:42:00

React Hooks都是以use开头的函数，普通函数看待即可，接受参数，有返回值。只不过它们有特定的使用规则，只能在函数顶层使用，和特定的作用，比如useState使函数组件拥有了状态，useEffect处理组件的副作用
<div class="cnblogs_code">
<pre>const App= () => {
const = useState(''); // useState接受一个参数，返回一个数组，数组的第一项是值，第二项是更新值的函数。
}</pre>
</div>
　　声明两个变量来接受useState的返回值，message变量获取到值，setMessage得到更新函数。更新函数的调用，React组件重新渲染(组件重新执行)，再次调用useState，message变量获取到更改后的值，组件就有了状态。使用create-react-app 创建项目，修改App.js
<div class="cnblogs_code">
<pre>const App = () => {
const = useState('');

function handleChange(e) { setMessage(e.target.value)}
return ( <input value={message} onChange={handleChange}></input> )
}</pre>
</div>
　　组件首次渲染，第一行调用useState()，返回了['', 更新函数]，分别赋值给了message和setMessage。继续向下执行，创建函数handleChange，再继续，返回一个jsx，message赋值给value, value的值为''，组件执行完成，页面上显示一个input 输入框，值为空。此时，输入1，触发了onChange事件，调用setMessage，触发了React 的更新机制。React不会立刻更新组件，而是把setMessage得到的新状态(1)放到更新队列中，React的渲染是异步的。当真正重新渲染时，React又会调用App函数组件，还是从上到下，一行一行执行代码。先调用useState()，此时useState返回的是[新的状态('1'), 更新函数]，分别赋值给了message和setMessage，初始值(函数的参数)被忽略了。接着函数handleChange创建，然后jsx，value是message, 是'1'。渲染完成，页面上input中显示1，组件状态改变了。当再输入2时，setMessage再次调用，新的状态(e.target.value('12'))再次存储。App组件再次被调用，还是先执行useSate()，返回最新的状态'12'，赋值给message, 然后创建一个handleChange函数，最后jsx中message取12，组件渲染完成，页面中的input显示12. 整个过程如下
<div class="cnblogs_code">
<pre>// 初始渲染。
const message = '';// useState() 的调用
function handleChange(e) { setMessage(e.target.value)}
return (<input value='' onChange={handleChange}></input>)

// 输入1 更新渲染
const message = '1';// useState() 的调用
function handleChange(e) { setMessage(e.target.value)}
return (<input value='1' onChange={handleChange}></input>)

// 再次输入2，更新渲染
const message = '12';// useState() 的调用
function handleChange(e) { setMessage(e.target.value)}
return (<input value='12' onChange={handleChange}></input>)</pre>
</div>
　　组件每一次渲染，都会形成它自己独有的一个版本，在每次渲染中，都拥有着属于它本次渲染的状态和事件处理函数，每一次的渲染都是相互隔离，互不影响的，也就是说，在每一次的渲染中，如果jsx和事件处理函数中引用状态变量，它们仅仅能够获取到本次渲染中的状态变量的值，状态变量的值，在渲染开始时，调用useState就已经决定了。状态变量，只不过是每一次调用useState 的返回值。React 负责状态的管理，而我们只是声明变量，使用状态。状态的更新，也不过是组件的重新渲染，React重新调用了组件函数，重新获取useState 返回的值。useState() 返回的永远都是最新的状态值。Each Render Has Its Own Props and State，Each Render Has Its Own Event Handlers。
　　useState的参数只在初次渲染时起作用，提供组件的初始状态。在以后的渲染中，不管是调用更新函数导致的组件渲染，还是父组件渲染导致子组件的渲染，参数都不会再用了，直接被忽略了，组件中的state状态变量，获取的都是最新值。useState可以接受函数初始化状态，毕竟只需初次渲染时执行一次。
<div class="cnblogs_code">
<pre>const Message= (props) => {
const messageState = useState(() => {return localstorage.getItem('name')}); // localStorage中去取数据作为初始状态
/* ... */
}</pre>
</div>
 　　更新函数的参数还可以是函数，函数参数是当前状态值。如果想使用当前状态，生成一个新状态，就可以使用函数。
<div class="cnblogs_code">
<pre>function handleChange(e){
const val = e.target.value;
setMessage(prev => prev + val); } </pre>
</div>
　　当组件的状态是引用类型，比如数组和对象时，更新函数的参数，如果是值，必须接受一个全新的对象和数组，如果是回调函数，回调函数必须返回一个全新的对象和数组，因为React更新状态时，会用Object.js()对新旧状态进行比较，如果它俩相等，就不会重新渲染组件。对象的比较是引用(地址)的比较，改变对象的属性，地址不会变，新旧状态一样，React 不会重新渲染。两个完全不同的对象，地址当然不一样，新旧状态也就不一样。这也是状态的整体替换原则，使用新的状态去替换掉老的状态，而不是setState的合并原则。
<div class="cnblogs_code">
<pre>const App = () => {
const = useState({ message: '', id: 1 });

return (
<div>
 <input value={messageObj.message}
 onChange={e => {
 setMessage(prevState => {
 return { ...prevState, message: e.target.value } // 返回一个全新的对象
 });
 }}
 />
 {messageObj.id} : {messageObj.message}
</div>
);
};</pre>
</div>
　　也正因为如此，React 建议把复杂的状态进行拆分，拆成一个一个单一的变量，更新的时候，只更新其中的某个或某些变量。就是使用多个useState(), 生成多个状态变量和更新函数。
<div class="cnblogs_code">
<pre>const App = () => {
const = useState('');
const = useState(1);

return (
 <div>
 <input value={message} onChange={e => { setMessage(e.target.value); }} />
 {id} : {message}
 </div>
);
};</pre>
</div>
　　当然，复杂状态变量可以拆分，主要是每一个属性所代表的状态之间的关联不大。如果状态关联性特别强，就必须是一个复杂对象，建议使用useReducer.
　　useEffect()
　　React的世界里，不是只有状态和改变状态，渲染组件，它还要和外界进行交互，比如，发送ajax请求，修改DOM，这些统称为副作用，因为React作用就是把state转化为UI，偏离主要功能的都是副作用。怎么理解副作用呢？可以把副作用想像成，组件渲染完成后，稍带要做的事情，主要任务做完了，稍带做点其他事情。怎么管理副作用？使用useEffect()。useEffect的第一个参数是回调函数，函数里面写副作用。组件渲染完成了，要改变dom，那就把改变dom的实现写到useEffect的回调函数中。
<div class="cnblogs_code">
<pre>import React, { useEffect, useState } from 'react';

export default function App() {
const = useState('');

function handleChange(e) { setMessage(e.target.value)}
useEffect(() => { document.title = `${message}`;})

return <input value={message} onChange={handleChange}></input>
}</pre>
</div>
　　effect中是怎么获取到message的最新状态值的？和事件处理函数一样，每一次的渲染都有属于这一次渲染的effect函数，在这次渲染中，它能够获取到属于本次渲染状态值。每一次渲染，effect函数都不相同。React记住了effect函数，组件渲染完成后，就会调用它
<div class="cnblogs_code">
<pre>// 初始渲染。
const message = '';// useState() 的调用
useEffect(() => { document.title = `${''}`;}) // 初始渲染的effect函数

// 输入1 更新渲染
const message = '1';// useState() 的调用
useEffect(() => { document.title = `${1}`;}) // 第二次渲染的effect函数

// 再次输入2，更新渲染
const message = '12';// useState() 的调用
useEffect(() => { document.title = `${12}`;}) // 第三次渲染的effect函数　　</pre>
</div>
　　总结一下React的渲染过程，React调用组件函数，state是''，组件返回<input value='' onChange={handleChange}></input>，同时告诉React，渲染完成后，执行() => { document.title = `${''}`;}，React更新DOM，浏览器在屏幕上画出输入框，时机已到，React执行effect函数(() => { document.title = `${''}`;})。当在输入框输入1，调用setMessage, 告诉React把状态更新为'1'，React重新调用组件，state为'1'，组件返回<input value='1' onChange={handleChange}></input>，同时告诉React，渲染完成后，执行() => { document.title = `${'1'}`;}，React更新DOM，浏览器在屏幕上画出输入框，时机已到，React执行effect函数(() => { document.title = `${'1'}`;})。
　　当useEffect的回调函数中返回一个函数时，这个函数称为清理函数
<div class="cnblogs_code">
<pre>useEffect(() => {
function log() {console.log(message);}
window.addEventListener('resize', log);

return () => {
window.removeEventListener('resize', log);
}
})</pre>
</div>
　　初次渲染，useEffect 就是告诉React，渲染完成后，执行   
<div class="cnblogs_code">
<pre>() => {
function log() {console.log('');} // 初次渲染时，message 为空
window.addEventListener('resize', log);

return () => {
window.removeEventListener('resize', log);
}</pre>
</div>
　　等到组件渲染到屏幕上时，effect函数执行，并注册了一个清理函数。组件再次渲染屏幕时，还是需要执行上面effect函数，不过上一次渲染完成后，注册了清理函数，所以先执行上一次渲染完成后注册的清理函数，再执行这一次渲染的effect函数，并再次注册一个清理函数。清理函数是在再次渲染完成后，需要执行effect函数前执行。需要注意的是，突然关闭页面，清理函数是不会执行的。但是在某些场景下，组件每次渲染后，都执行effect的函数，会带来问题，比如请求数据，组件渲染完成后，只请求一次就可以了。如下代码
<div class="cnblogs_code">
<pre>import React, { useEffect, useState } from 'react';

export default function App() {
const = useState('');

useEffect(() => {
 fetch('https://jsonplaceholder.typicode.com/todos/1')
 .then(response => response.json())
 .then(json => {
 setMessage(json.title);
 })
})
return <div>{message}</div>
}</pre>
</div>
　　打开控制台，发现不停地调用接口，状态更新会导致组件重新渲染，渲染完成，useEffect又会重新调用。请求数据-> 更新状态->重新请求数据->更新状态，死循环了。这要用到useEffect的第二个参数，一个数组，用来告诉React ，再次渲染完成后，要不要调用useEffect中的函数。把useEffect回调函数中的要用到的外部变量，依次写到数组中，React就知道回调函数的执行是依赖这些变量，那么它就会时时地监听这些变量的变化，只要有更新，它就会重新调用回调函数。这个数组也称为依赖数组，回调函数要再次执行的依赖。函数的依赖发生变化，才会重新调用函数，函数的依赖没有变化，就不用调用函数。现在的回调函数fetch,  没有任何外部变量依赖，那就写一个空数组。空数组表示回调函数不依赖任何变量，没有依赖，永远不会变化，初次渲染完成后执行一次，以后更新就不用管了。
<div class="cnblogs_code">
<pre> useEffect(() => {
 fetch('https://jsonplaceholder.typicode.com/todos/1')
 //...
}, []) // 空数组，回调函数没有依赖作何外部的变量</pre>
</div>
　　如果组件属性或状态发生变化，都要执行useEffect，useEffect的回调函数就有依赖了，比如id变化，获取某个id的todos。
<div class="cnblogs_code">
<pre>export default function App() {
const = useState('');
const = useState(1);

function handleId(e: any) { setId(e.target.value);}

useEffect(() => {
 fetch('https://jsonplaceholder.typicode.com/todos/' + id)
 .then(response => response.json())
 .then(json => { setTodoTitle(json.title); })
}, ) // 回调函数依赖了一个外部变量id

return(
 id: <input type='number' value={id} onChange={handleId}></input>
 item title: {todoTitle}
 
)
}</pre>
</div>
　　useEffect的回调函数中的变量、依赖数组中的变量和状态变量都是id，一一对应。只要在effect函数中用到了react数据流中的值，无论是props，state和函数，都要放到effect依赖数组中。其实effect回调函数还依赖setTotoTitle，但React 保证 set* 函数，在整个组件的渲染过程是都是一致的，可以不写。以下情况，可以把依赖去掉，而不会影响effect函数的执行。
<div class="cnblogs_code">
<pre>useEffect(() => {
const id = setInterval(() => {
 setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, );</pre>
</div>
　　转化成
<div class="cnblogs_code">
<pre>useEffect(() => {
const id = setInterval(() => {
 setCount(c => c + 1); // c => c + 1，函数每次都会获取最新组件的状态给c
}, 1000);
return () => clearInterval(id);
}, []);</pre>
</div>
 　　函数要不要定义到组件中，就看函数中有没有用到组件的属性和状态，如果没有，就和React无关，就可以把它放到组件外面，比如下面的函数
<div class="cnblogs_code">
<pre>function getFetchUrl(query) {
return 'https://hn.algolia.com/api/v1/search?query=' + query;
}
</pre>
</div>
 　　useEffect的执行时机是渲染结果画到页面上后才执行，如果effect中操作dom，dom元素先出现到页面上，再修改，可能会造成闪动。如果不想要这种闪动，就要使用useLayoutEffect，useLayoutEffect则是DOM更新完成，还没有渲染到页面上时执行。
<img src="https://img2024.cnblogs.com/blog/1013082/202411/1013082-20241111214122282-260383185.png">
 　　useState的简单理解：每一个组件都是一个fiber，它有一个memoizedState ，指向第一个useState，每一个useState都用链表链接起来
<img src="https://img2024.cnblogs.com/blog/1013082/202411/1013082-20241120111611385-346476349.jpg">
 　　hook的调用顺序至关重要。
<div class="cnblogs_code">
<pre>const Title = ({ flag }) => {

  const a = flag ? _useHook('a') : ' '

  const b = _useHook('b')

  return <h1>Hello World+{a}{b}</h1>

}</pre>
</div>
<img src="https://img2024.cnblogs.com/blog/1013082/202411/1013082-20241120113922792-2005504196.jpg">
 　　那怎么实现上面的条件逻辑？
<div class="cnblogs_code">
<pre>const Title = ({ flag }) => {

  const _a = _useHook('a')

  const b = _useHook('b')

  const a = flag ? _a : ' '

  return <h1>Hello World+{a}{b}</h1>

}</pre>
</div>
　　useHook(_a)每次都会计算一次，但是可以不用。
  
来源：https://www.cnblogs.com/SamWeb/p/11946418.html

頁: [1]

琼殿技术论坛's Archiver

React Hooks