【React】深入理解prop、state与render函数

prop 与 state 的对比

• prop 用于定义外部接口，state用于记录内部状态；
• prop的赋值在外部世界使用组件时，state的赋值在组件内部；
• 组件不应该改变 prop 的值，而 state 存在的目的就是让组件来改变的；

关于 prop

设置 props 的方式

1）可以在组件挂载时设置props：

<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function(){
    
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>
        }
    });
    React.render(<HelloWorld name="Sam" />, document.body);
</script>

2）也可以通过调用组件实例的setProps()方法来设置props（在ES6中将被禁用，这个方法不支持ES6类组件React.Component扩展。）

<script type="text/babel">
    var HelloWorld = React.createClass({
        render: function(){
   
            return <p>Hello, {
  this.props.name ? this.props.name : "World"}</p>
        }
    });
    var instance = React.render(<HelloWorld/>, document.body);
    instance.setProps({name: 'Tim'});
</script>

prop 支持的数据类型

我们先从外部世界来看，prop是如何使用的，在下面的JSX代码片段中，就使用了prop：

<SampleButton id="sample" borderWidth={2}