[JavaScript知识库]React---props和state的区别

React组件中props和state属性会经常使用，弄清楚它们之间的区别以及什么时候使用props或者state十分有必要。

1. props和state的区别

props是父组件传给子组件的属性，只可读不可写。官方是这么说的：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

state属性是组件内的私有属性，用于维护组件内的数据。可以通过调用setState()方法改变state的值。setState()方法调用完之后会调用组件内的render()函数，因此注意不要将setState()方法写在render()函数内，会造成死循环。

2. 什么时候使用props？什么时候使用state？

这个问题其实可以转换为一个问题----什么时候使用state？
当我们已经了解到了所有组件之间的逻辑之后，在考虑数据是否放在state里时，可以思考：

1.该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
2.该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
3.你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

代码练习

封装一个简单的Clock组件。
思路：
由于Clock是会被复用的，所以时间值放在state中，不一样的地方可以放在props中（如每个时钟的名字）。
代码如下：

import React from 'react';
import ReactDOM from 'react-dom'

class Clock extends React.Component{
    constructor(props){
        console.log('construct Clock');
        super(props);
        this.state = {
            time: new Date().toLocaleTimeString(),
        }
    }
    componentDidMount(){
        console.log('didMount');
        this.timer = setInterval(()=>{
            this.setState({
                time: new Date().toLocaleTimeString(),
            });
        },1000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render(){
        console.log('Clock renser');
        return (
            <div>
                <h2>
                    {this.props.name}
                </h2>
                <h3>
                    {this.state.time}
                </h3>
            </div>
        );
    }
}


function Box(props){
    console.log('box');
    return <Clock name="时钟1"/>;
}

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

运行结果如下：

根据打印的日志可以知道组件是从上至下执行的，执行到Clock组件之后。先执行constructor()函数，然后执行render()函数，然后执行componentDidMount()函数，在componentDidMount()函数中，setState()函数每隔一秒被调用，因此render()也跟着被一直调用。