Question

反应抱怨此代码吗？为什么？

componentDidMount() {
  <childComponent />;
}

页面加载时，我只需要显示一次 childComponent 。

Answer 1

<MyComponent>只是syntactic sugar，用于抽象元素创建和事件绑定。在渲染以外的其他地方使用它没有任何意义。

如果只想在页面加载时显示组件，则应更新状态并使用状态条件渲染。 React从那里得到了它，优化了许多您没有想到的东西，并允许您拥有符合模式，易于维护和易于调试的React应用程序。符合以下条件的

export default class MyComponent {
  constructor(props) {
    super(props);
    this.state = {
      display = false;
    }
  }
  componentDidMount() {
    this.setState({display: true});
  }
  render() {
    return this.state.display ? <ChildComponent/> : <div>Not yet</div>;
  }
}

Answer 2

正如一些评论所指出的那样，没有必要在componentDidMount上有条件地渲染组件。这就是render函数的作用。这样做的原因是，通常，一旦点击应用程序URL，便会将整个React应用程序加载到客户端上。

在某些情况下，渲染之前需要等待资源或数据加载：

延迟加载：可以将应用程序分成多个块。然后，仅在需要时才可以将那些块传递给客户端。在React docs中了解有关此内容的更多信息。

以下是一种可能的实现方式的示例（同样来自docs）：

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

等待数据：从服务器返回数据后，也可能只希望呈现组件（或组件的某些部分）。在这种情况下，您可以决定在componentDidMount中发起服务器请求，然后在返回数据后有条件地渲染某些内容。

以下是使用hooks（在16.8版本中）的一种可能实现的示例：

const DataHandlerComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [submitting, setSubmitting] = useState(true);

  // equivalent to componentDidMount
  useEffect(() => {
    axios.get('some url')
      .then(({ data }) => {
        setData(data);
        setSubmitting(false);
      })
      .catch((err) => {
        setError(err);
        setSubmitting(false)
      });
  }, []);

  // equivalent to render
  return (
    <div>
      {submitting &&
        <YourCustomProgress />
      }
      {!submitting && data &&
        <YourCustomComponent data={data} />
      }
      {!submitting && !data &&
        <YourCustomErrorComponent error={error} />
      }
    </div>
  );
};

希望这些选项之一可以满足您的需求。如果不需要这两种方法之一，则可以只在正常渲染周期中渲染组件。

Answer 3

 class demo extends Component{
    constructor(props){
        super(props);
        this.state = {loading : true}

    }
    componentDidMount() {
        this.setState({loading : false});
    }
    render(){
        return (
            {(()=>{
                if(this.state.loading == false){
                    return(
                        <childComponent />
                    )
                }else{
                    return (
                        <div>loading...</div>
                    )
                }       
            })}
        )
    }
}

反应-我可以在componentDidMount内部添加组件吗？

3 个答案: