如何向孙组件Search.js传递授权令牌且避免其重渲染？

方案1：React.memo + 稳定Props传递 #

如果你的token是字符串这类不可变值，直接通过props传递，同时用React.memo包裹Search.js，这样只有当token或其他依赖的props变化时，Search才会重渲染。

步骤：

1. 用React.memo包装Search组件：

// Search.js
import React from 'react';

const Search = React.memo(({ authToken }) => {
  // 请求逻辑，使用authToken调用SharePoint接口
  return <div>搜索组件</div>;
});

export default Search;

2. 在Dropdown.js中直接传递authToken：

// Dropdown.js
import Search from './Search';

const Dropdown = ({ authToken }) => {
  // Dropdown的其他逻辑
  return (
    <div>
      {/* 其他Dropdown内容 */}
      <Search authToken={authToken} />
    </div>
  );
};

export default Dropdown;

3. 在App.js中验证完成后传递token：

// App.js
import Dropdown from './Dropdown';
import { useState, useEffect } from 'react';

const App = () => {
  const [authToken, setAuthToken] = useState(null);

  useEffect(() => {
    // 模拟授权验证，获取token
    const fetchToken = async () => {
      const token = await getSharePointAuthToken();
      setAuthToken(token);
    };
    fetchToken();
  }, []);

  return authToken ? <Dropdown authToken={authToken} /> : <div>加载中...</div>;
};

export default App;

方案2：Context API 传递（适合多层级传递场景） #

如果后续还有更多组件需要token，用Context更方便，同时结合React.memo避免不必要重渲染。

1. 创建AuthContext：

// AuthContext.js
import React, { createContext, useContext } from 'react';

const AuthContext = createContext(null);

export const AuthProvider = ({ children, token }) => {
  return <AuthContext.Provider value={token}>{children}</AuthContext.Provider>;
};

export const useAuth = () => useContext(AuthContext);

2. 在App.js中包裹组件树：

// App.js
import Dropdown from './Dropdown';
import { AuthProvider } from './AuthContext';
import { useState, useEffect } from 'react';

const App = () => {
  const [authToken, setAuthToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      const token = await getSharePointAuthToken();
      setAuthToken(token);
    };
    fetchToken();
  }, []);

  if (!authToken) return <div>加载中...</div>;

  return (
    <AuthProvider token={authToken}>
      <Dropdown />
    </AuthProvider>
  );
};

export default App;

3. 在Search.js中获取token，并用React.memo包裹：

// Search.js
import React from 'react';
import { useAuth } from './AuthContext';

const Search = React.memo(() => {
  const authToken = useAuth();
  
  // 使用authToken发起请求
  return <div>搜索组件</div>;
});

export default Search;

这样Dropdown的重渲染不会影响Search，只有当authToken变化时，Search才会重新渲染。

方案3：useRef 传递（适合token极少变化的场景） #

如果token一旦获取就不会更新，你可以在App.js中用useRef存储，然后通过props传递ref，Search直接读取ref.current。这种方式下，即使父组件重渲染，Search也不会触发重渲染。

1. 在App.js中用useRef存储token：

// App.js
import Dropdown from './Dropdown';
import { useRef, useEffect } from 'react';

const App = () => {
  const authTokenRef = useRef(null);

  useEffect(() => {
    const fetchToken = async () => {
      const token = await getSharePointAuthToken();
      authTokenRef.current = token;
    };
    fetchToken();
  }, []);

  return authTokenRef.current ? <Dropdown authTokenRef={authTokenRef} /> : <div>加载中...</div>;
};

export default App;

2. 在Dropdown.js中传递ref：

// Dropdown.js
import Search from './Search';

const Dropdown = ({ authTokenRef }) => {
  return (
    <div>
      <Search authTokenRef={authTokenRef} />
    </div>
  );
};

export default Dropdown;

3. 在Search.js中使用ref：

// Search.js
import React, { useEffect } from 'react';

const Search = ({ authTokenRef }) => {
  useEffect(() => {
    // 发起请求时读取authTokenRef.current
    const fetchData = async () => {
      if (authTokenRef.current) {
        const response = await fetchSharePointData(authTokenRef.current);
        // 处理响应
      }
    };
    fetchData();
  }, []); // 空依赖数组，只在组件挂载时执行一次

  return <div>搜索组件</div>;
};

// 因为props是ref对象（引用类型），只要ref本身不变，React.memo可以避免重渲染
export default React.memo(Search);

注意：这种方式下，如果token后续更新，Search不会自动感知，适合token一次性获取的场景。

内容的提问来源于stack exchange，提问作者Squid