React _ 组件

组件

React组件，有点类似JavaScript中的函数；它可以被传入参数（props），从而返回相应的React元素。通过React组件，就可以非常方便地得到用于更新页面的React元素。讲白了，React组件就是为了提高生成React元素的效率，复用React组件，就不用每次重复裸写React元素了。

函数组件 vs 类组件

定义组件最简单的方式就是使用JavaScript函数：

function Zhuanfou(props) {
  return <h1>专否 {props.slogan}</h1>;
}

另外，还可以通过ES6类（class）的方式来定义组件：

class Zhuanfou extends React.Component {
  render() {
    return <h1>专否 {this.props.slogan}</h1>;
  }
}

上述两种方式是等效的，至于class的额外特性之后会逐步介绍。对于比较简单的需求，优先使用函数组件；对于相对复杂的，优先使用类组件。有一点需要注意：组件名称必须以大写字母开头。

组件渲染

根据上面定义的组件，可以直接用以下方式进行渲染：

const element = <Zhuanfou slogan="反清复明" />;

当React元素为用户自定义组件时，它会将JSX所接收的属性转换为props参数传递给自定义的Zhuanfou组件。示例如下，页面上会最终渲染出“专否反清复明”的h1标题。

function Zhuanfou(props) {
  return <h1>专否 {props.slogan}</h1>;
}

const element = <Zhuanfou slogan="反清复明" />;

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

运行一下

组件嵌套

如下所示，自定义组件中可以继续嵌套别的自定义组件：

function Zhuanfou(props) {
  return <h1>专否 {props.slogan}</h1>;
}

function App() {
  return (
      <div>
          <Zhuanfou slogan="反清复明" />
          <Zhuanfou slogan="地振高冈，一派西山千古秀" />
          <Zhuanfou slogan="门朝大海，三合河水万年流" />
      </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

运行一下

组件的技巧就是尽量把组件拆分得比较细，再通过组件的嵌套来构建复杂的大组件。这其实就是编程架构最基本的思维“高分离、低耦合”与“复用就是效率”。

组件

推广