使用React Hooks的setter，如何在组件呈现之前设置数据？

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在这里设置数据
    const initialData = { /* 你的初始数据 */ };
    setData(initialData);
  }, []); // 空依赖数组确保这个effect只在组件挂载时运行一次

  return (
    <div>
      {/* 使用data */}
      {JSON.stringify(data)}
    </div>
  );
}

export default MyComponent;

import React, { useState, useEffect } from 'react';

function useInitialData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在这里设置数据
    const initialData = { /* 你的初始数据 */ };
    setData(initialData);
  }, []);

  return data;
}

function MyComponent() {
  const data = useInitialData();

  return (
    <div>
      {/* 使用data */}
      {JSON.stringify(data)}
    </div>
  );
}

export default MyComponent;

import React, { Component } from 'react';

function withInitialData(WrappedComponent) {
  return class extends Component {
    state = {
      data: null,
    };

    componentDidMount() {
      // 在这里设置数据
      const initialData = { /* 你的初始数据 */ };
      this.setState({ data: initialData });
    }

    render() {
      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
}

class MyComponent extends Component {
  render() {
    const { data } = this.props;
    return (
      <div>
        {/* 使用data */}
        {JSON.stringify(data)}
      </div>
    );
  }
}

export default withInitialData(MyComponent);

import React, { createContext, useContext, useState, useEffect } from 'react';

const DataContext = createContext();

function DataProvider({ children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在这里设置数据
    const initialData = { /* 你的初始数据 */ };
    setData(initialData);
  }, []);

  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  );
}

function MyComponent() {
  const data = useContext(DataContext);

  return (
    <div>
      {/* 使用data */}
      {JSON.stringify(data)}
    </div>
  );
}

function App() {
  return (
    <DataProvider>
      <MyComponent />
    </DataProvider>
  );
}

export default App;