React-组件Props和State的区别

props 和 state 的区别

props 和 state 都是用来存储数据的

• props 存储的是父组件传递归来的数据
• state 存储的是自己的数据
• props 是只读的, 也就是说只可以进行使用，不可以进行修改

import React from 'react';

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            age: 18
        }
    }

    render() {
        return (
            <div>
                <p>{this.props.name}</p>
                <p>{this.state.age}</p>
                <button onClick={() => {
                    this.btnClick();
                }}>Home按钮
                </button>
            </div>
        )
    }

    btnClick() {
        this.props.name = '小灰灰';
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <Home name={'BNTang'}/>
            </div>
        )
    }
}

export default App;

• state 是可读可写的，如果直接修改是不会触发页面的更新的

btnClick() {
    this.state.age = 666;
    console.log(this.state.age);
}

• 如果想触发页面的更新得要通过 setState 进行设置

btnClick() {
    this.setState({
        age: 666
    });
}

官方文档：

• https://zh-hans.reactjs.org/docs/components-and-props.html
• https://zh-hans.reactjs.org/docs/state-and-lifecycle.html