当前位置：首页 > news >正文

reatc的几个基础的hooks

news 来源：原创 2024/5/7 1:04:34

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;