State与生命周期 (精读React官方文档—05)

简介: State与生命周期 (精读React官方文档—05)

这是我参与更文挑战的第18天,活动详情查看:更文挑战

state是私有的。

官方描述:State 与 props 类似,但是 state 是私有的,并且完全受控于当前组件。

解读

  • 官方对state的介绍很重要,我们必须要知道state是私有的,并且完全受控于当前组件。

将函数组件转换为类组件

  1. 创建一个同名的类,并且继承与React.Component.
  2. 添加一个空的render()方法.
  3. 将函数体(return(...))移动到render方法中.
  4. 在render方法中使用this.props代替props.
  5. 删除剩余的空函数声明.

函数组件

function Clock(props) {
    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {props.date.toLocaleTimeString()}.</h2>
        </div>
    );
}
复制代码

类组件

class Clock extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}
复制代码
  • 每次更新的时候render函数都会被调用。

向类组件中添加局部state

  1. 将render方法中的this.props.data转换为this.state.date.
  2. 给类添加一个构造函数,并为this.state赋值.
  3. 移出类元素中的date属性.

将声明周期方法添加到类组件中

  • componentDidMount():组件挂载后开始运行,此处适合开启定时器。
  • componentWillUnMount():组件将要卸载的时候运行,此处适合清除定时器。
  • 上面的这种方法叫做声明周期方法。

使用类组件实现计时功能

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()}
    }
    tick() {
        this.setState({
            date: new Date()
        })
    }
    componentDidMount() {
        this.timerID = setInterval(() => {
            this.tick();
        }, 1000);
    }
    componentWillUnmount() {
        clearInterval(this.timerID)
    }
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}
ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);
复制代码

计时器的执行顺序

  1. 当Clock组件传递给ReactDOM.reder后,React会首先调用Clock组件的构造函数,然后初始化state.
  2. React调用组件的render方法,然后更新DOM进行渲染。
  3. 当Clock的输出被插入到DOM中后,开始调用componentDidMount这个生命周期函数,这个生命周期函数中,React向浏览器设置一个定时器,每隔1秒,调用组件的tick方法。
  4. 浏览器每调用一次tick方法,tick方法都会通过setState更新一次状态,只要状态发生了改变,React就会重新调用组件的render方法,然后进行重新渲染,然后更新DOM。
  5. 一旦Clock组件从DOM中删除,React就会调用生命周期函数componentWillUnmount,然后清除定时器。

正确使用state

  1. 不要直接修改state,而是需要通过setState.
this.state.comment = 'Hello';  //不行
this.setState({comment: 'Hello'});  //可以
复制代码
  1. state的更新可能是异步的.
  • 下面的代码可能无法更新state
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
复制代码
  • 解决上面的问题,可以让state接收一个函数,这也是setState更新状态的第二种方式。
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
复制代码
  1. state的更新会被合并。

看下面的例子你就明白了。

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });
    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }
复制代码

官方解释:this.setState({comments}) 完整保留了 this.state.posts, 但是完全替换了 this.state.comments。

这里官方的解释非常完善了。

数据是向下流动的

官方描述:组件可以选择把它的 state 作为 props 向下传递到它的子组件中。FormattedDate 组件会在其 props 中接收参数 date,但是组件本身无法知道它是来自于 Clock 的 state,或是 Clock 的 props,还是手动输入的。

<FormattedDate date={this.state.date} />
复制代码
function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
复制代码

解读

  • 这种数据流就是单向数据流,因为state产生的数据只能影响其子组件,

欢迎大家关注我的专栏,每日用碎片化的时间学习提高自己,加油!


相关文章
|
7天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
6天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
1月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为
|
23天前
|
前端开发
React生命周期
React生命周期
11 0
|
2月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
28 3
|
2月前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
25 1
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
59 0
|
2月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
31 0
|
2月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
46 1
|
2月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
18 0