React中的state与props的再理解

Posted 2020-09-19

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‘)
        )