12、React 渲染与生命周期方法详解

深海孤鲸134

于 2025-07-24 10:29:58 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

分类专栏： React深度解析与实战文章标签： React 生命周期方法渲染

本文链接：https://blog.youkuaiyun.com/grafana6viz/article/details/150373980

React深度解析与实战专栏收录该内容

33 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React 渲染与生命周期方法详解

1. React 组件的渲染与生命周期方法概述

在 React 中，组件的渲染和生命周期方法是非常重要的概念。以下是一个父组件的示例代码：

console.log('ParentComponent: state');
this.state = { text: '' };
this.onInputChange = this.onInputChange.bind(this);

componentWillMount() {                                  
    console.log('ParentComponent: componentWillMount');
}

componentDidMount() {                                   
    console.log('ParentComponent: componentDidMount');
}

onInputChange(e) {
    const text = e.target.value;
    this.setState(() => ({ text: text }));
}

render() {
    console.log('ParentComponent: render');
    return [
        <h2 key="h2">Learn about rendering and lifecycle methods!</h2>,
        <input key="input" value=