react props与render成员函数

Posted 2021-11-02 omiturix

  props是组件固有的属性集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的，React的API顶层设计也决定了这一点。属性初值通常由React.createElement函数或者JSX中标签的属性值进行传递，并合并到组件实例对象的this.props中。事实上，组件接受静态信息的主要渠道就是props属性。

比如： 

 var HelloBox = React.createClass({

　　　　　　render : function() {

　　　　　　return <div>{‘Hello‘+this.props.myattr }</div>;

　　　　　　}
　　　　})

　　　　React.render(<HelloBox myattr = "world" />,mountNode);

 

 

　　或者

　　

React.render（

　　　　React.createElement（

　　　　　　HelloBox，

　　　　　　{myattr：‘world’}

　　　　），

　　　　mountNode
　　　）；

 

　　　　props中也会包含一些由React自动填充的数据，this.props.children数组中会包含本组件实例的所有子组件，由React自动填充。另外，还能通过配置实现this.props.context跨级包含上级组件的数据等。

此外，props与state的区别体现在，props不能被所在组件修改，从父组件传进来的属性不会在组件内部更改；state只能在所在组件内部更改，或在外部调用setState函数间接修改状态。

---

---

 

 

render函数

　　render主要流程是检测this.props和this.state，再返回一个单一组件实例，也可以返回null或者false表明不需要渲染任何东西，对应的React渲染一个<noscript>标签来处理。当返回null或false的时候，this.getDOMNode（）将返回null。

render函数应该是纯粹的，也就是说，在render函数内不应修改组件state，不读写DOM信息，也不与浏览器交互，比如调用setTimeout就是一种与浏览器的交互。如果确实要与浏览器交互，componentDidMount（）中或者其他生命周期方法中设置。

　　React组件只能渲染单个根节点。如果想返回多个节点，它们必须被包含在同一个父节点中。