React 入门 04 - props 和 state

前言

在前文React 入门 03 - 元素与组件中学习了React基础元素与组件，今天来探究一下React组件的两个基本属性props和state的用法与区别。

它们的一个重要的不同点就是：props是传递给组件的（类似于函数的形参），具有只读特性，是不可修改的。state是组件内自己管理的（类似于函数内声明变量），是可以用特定方式进行值更新的。

props

props（“properties”的缩写）和state都是普通的JavaScript对象。它们是用来保存信息的，这些信息可以控制组件的渲染输出。

state

React 把组件看成是一个状态机 (State Machines)，state记录组件的内部状态，有state叫有状态组件，无state叫无状态组件。React通过改表state的值来控制界面变化，界面会根据state的值变化而重新渲染。

state 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

正确使用 state

React 通过更新state的值来控制界面的变化，但需要注意的是 state 值是不可以直接修改的，必须使用setState(...) 方法来更新。

1. 不要直接修改 State。例如，此代码不会重新渲染组件：

// Wrong
this.state.user = 'Ria';

而是应该使用 setState():

// Correct
this.setState({user: 'Ria'});

构造函数是唯一可以给 this.state 赋值的地方。

2. 在事件处理函数内部的 setState(...)是异步的。React 会将该 state “冲洗” 到浏览器事件结束的时候，再统一地进行更新。这种机制可以在大型应用中得到很好的性能提升。

3. 调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

React 数据自顶向下流动

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。

组件可以选择把它的 state 作为 props 向下传递到它的子组件中。

实例

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date()
        };
    }

    // React 组件生命周期函数，在render()之后  
    componentDidMount() {
        this.timerId = setInterval(
            () => this.tick(),
            1000
        )
    }

    // React 组件生命周期函数，在组件卸载(unmounted)或销毁(destroyed)之前
    componentWillUnmount() {
        clearInterval(this.timerId);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                <h1> Hello World! </h1>
                <h2> It is {this.state.date.toLocaleTimeString()} </h2>
            </div>
        );
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

stateDemo.html Git Hub 🔗 

参考资源

https://zh-hans.reactjs.org/docs/faq-state.html

https://zh-hans.reactjs.org/docs/react-component.html