首页 > 代码库 > React中的state与props的再理解

React中的state与props的再理解

2024-09-25 00:33:01   203人阅读

props可以看做是 property 的缩写的复数，可以翻译为属性，类似于HTML 标签的自定义属性。在大多数React教程里讲
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。其实这种说法有问题。可以参考一篇文章《React中state与props介绍与比较》
组件中的props本质作用是一种父级向子级传递数据的方式。props是可以改变的，只是没有提供API可以在子组件里直接修改，我们可以在父组件里把要给子组件的属性值修改。
        var WebSite = React.createClass({
            getInitialState() {
                return ( {
                    name: ‘二手车‘,
                }  
                );
            },
            onPress() {
                this.setState({
                    name: ‘新的‘ + this.state.name,
                })
            },

            render() {
                return (
                    <div onClick={this.onPress} >
                        <Name name={this.state.name} />
                    </div>
                );
            }

        });

        var Name = React.createClass({
            render() {
                return (
                    <h1>{this.props.name}</h1>
                );
            }
        });


        ReactDOM.render(
            <WebSite />,
            document.getElementById(‘example‘)
        )

 

技术分享 技术分享技术分享

 

 

 

 

React中的state与props的再理解


联系
我们