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; 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/te-jc/10972.html