24-React Components组件

Components 组件

1.组件 可以让UI独立的分割出来，可以让UI重复利用。
2.组件就像是JavaScript函数，它们能够接收任意的输入（称为“props”,即属性）并且返回React元素。
3.组件可以嵌套组件。

用javascript函数定义一个组件（Functional 
Components ）。如下所示：

function Welcome(props) {
return

Hello, {props.name}

;
}

用ES6 class来定义组件，如下所示:
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}
当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。

render
ReactComponent render()
render() 方法是必须的。

当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如

或者 React.DOM.div()），也可以是自定义的复合组件。

你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上，React 渲染一个

render() 函数应该是纯粹的，也就是说该函数不修改组件 state，每次调用都返回相同的结果，不读写 DOM 信息，
也不和浏览器交互（例如通过使用 setTimeout）。如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。
保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。

React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问。
唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存 React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果。

属性props

function Welcome(props) {
return

Hello, {props.name}

;
}
const element = ;
ReactDOM.render( element, document.getElementById('root') );

如上代码所示：name=“Sara” 将被组装成对象{name: ‘Sara’} ，
并且这个对象将被渲染成属性传递给组件。

属性（props）是只读的，你无法改变传入的属性值