创建React组件

 

组件概述

 

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

提取组件一开始看起来像是一项单调乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次，或者其自身就足够复杂，类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法。

 

组件定义

 

1 函数定义组件

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

2 类定义组件

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

3 createElement

 

语法

 

React.createElement(
  type,
  [props],
  [...children]
)

 

代码

 

const title = React.createElement(
    'div',
    {sport:'football'},
    [
        <div key="program">天下足球</div>,
        <div key="comment">留给中国队的时间不多了</div>
    ]
);
ReactDOM.render(title,document.getElementById('root'));        

 

说明

 

1 所有的React组件必须像纯函数那样使用它们的props。

  props是只读的。无论是使用函数或是类来声明一个组件，它决不能修改它自己的props，否则会抛异常。

2 使用类定义组件，可以使用组件的其它特性：局部状态（state属性）、生命周期钩子等。