React渲染前设置状态：替代componentWillMount的最佳传参方法？

嘿，这个问题问得好！确实，componentWillMount早就被React官方标记为不安全的生命周期方法了，现在有更可靠、更符合React设计理念的方案来实现你要的需求。我分两种常见的组件写法来给你讲，你可以根据自己项目的情况选择：

一、函数组件（React 16.8+ 推荐写法） #

现在React主推函数式编程+Hooks，用useState管理状态、useEffect处理副作用（比如数据请求）是当前的最佳实践：

import { useState, useEffect } from 'react';
import Example from './Example';

function App() {
  // 初始化状态，默认值可根据实际场景调整
  const [userData, setUserData] = useState({ name: '', id: '' });
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 封装异步数据请求逻辑
    const fetchServerData = async () => {
      try {
        // 替换为你的服务器接口地址
        const response = await fetch('/api/user-info');
        const data = await response.json();
        // 将获取到的数据更新到App的状态中
        setUserData({ name: data.name, id: data.id });
      } catch (error) {
        console.error('数据获取失败:', error);
        // 这里可以添加错误提示逻辑，比如弹出全局Toast
      } finally {
        // 无论请求成功失败，都结束加载状态
        setIsLoading(false);
      }
    };

    fetchServerData();
    // 空依赖数组表示这个effect仅在组件挂载时执行一次
  }, []);

  // 加载状态下显示提示，避免给Example传递未初始化的props
  if (isLoading) {
    return <div>正在加载数据...</div>;
  }

  // 数据准备完成后，将状态作为props传递给Example组件
  return (
    <div className="App">
      <Example name={userData.name} id={userData.id} />
    </div>
  );
}

export default App;

二、类组件（兼容旧版本项目） #

如果你的项目还在使用类组件，用componentDidMount生命周期发起数据请求是替代componentWillMount的最优选择：

import React, { Component } from 'react';
import Example from './Example';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      id: '',
      isLoading: true
    };
  }

  componentDidMount() {
    // 组件挂载完成后发起数据请求
    fetch('/api/user-info')
      .then(response => response.json())
      .then(data => {
        this.setState({
          name: data.name,
          id: data.id,
          isLoading: false
        });
      })
      .catch(error => {
        console.error('数据获取失败:', error);
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { name, id, isLoading } = this.state;

    if (isLoading) {
      return <div>正在加载数据...</div>;
    }

    return (
      <div className="App">
        <Example name={name} id={id} />
      </div>
    );
  }
}

export default App;

关键注意点 #

• 为什么弃用componentWillMount？它在服务器端渲染时会执行两次，且React官方已标记为不安全方法，未来版本可能移除。另外，在这个方法里发起请求并不能避免组件首次渲染，反而可能导致状态更新时机混乱。
• 一定要加加载状态：避免在数据未准备好时给Example传递空值或未定义的props，既提升用户体验，也能避免潜在报错。
• 如果数据需要根据props变化重新获取：函数组件可把依赖项加入useEffect的依赖数组；类组件可使用componentDidUpdate生命周期处理。

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