React-组件Props和State的区别

原创

杨不易呀

发布于 2023-09-30 14:32:08

6330

文章被收录于专栏：杨不易呀杨不易呀

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={'yangbuyiya'}/>
            </div>
        )
    }
}

export default App;

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

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

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

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

官方文档：

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

React-组件Props和State的区别

React-组件Props和State的区别

props 和 state 的区别

最后

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐