React 数据传递&数据变化

props

在页面中引用header时,这样写<Header title = 'Hellow页面' />,即给Header组件设置一个title属性,而在Header组件中可以这样取到

    render() {
        return (
             <div>
                <p>{this.props.title}</p>
                <p>{this.props.aaa}</p>
            </div>
        )
    }
}

Hello/index.jsx页面

    render() {
        var obj = {a:100,b:200}
        return (
            <div>
                <Header title="hello页面" aaa={obj.a}/>
                <p onClick={this.clickHandler.bind(this)}>hello world {this.state.now}</p>
                <hr/>
                <Carousel/>
                <Recommend/>
                <List/>
            </div>
        )
    }

在React中,父组件给子组件传递数据时,就是以上方式,通过给子组件设置props的方式,子组件取得props中的值,即可完成数据传递.被传递数据的格式可以时任何js可识别的数据结构,上面demo时一个字符串
React中,props一般只作为父组件给子组件传递数据用,不要试图去修改自己的props

props&&state

上面说到props不能被自身修改,如果组建内部的属性发生变化,该怎么办? — React为我们提供了state

class Hello extends React.Component {
    constructor(props, context) { //构造器  类似与ES5中new实例对象
        super(props, context);
        this.state = {
            now: Date.now()
        }
    }
    render() {
        var obj = {a:100,b:200}
        return (
            <div>
                <Header title="hello页面" aaa={obj.a}/>
                <p onClick={this.clickHandler.bind(this)}>hello world {this.state.now}</p>
                <hr/>
                <Carousel/>
                <Recommend/>
                <List/>
            </div>
        )
    }
    clickHandler() {
        this.setState({ //必须用this.setState去赋值,不能直接修改
            now: Date.now()
        })
    }
}

React会实时监听每个组件的props和state的值,一旦有变化,会立刻更新组件,将结果重新渲染到页面上,不仅仅时state,props也一样