[React] 组件 & Props（3）

函数定义/类定义组件

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

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

上面两个组件在React中是相同的。
只是第一种是JS函数定义的组件，第二种是ES6 Class定义的组件。

组件渲染

React元素可以是DOM标签，也可以是用户自定义的组件。

const element = <Welcome name="Sara" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。
如上图会将{name: 'Sara'}作为props的值入Welcome组件内部。

警告:
组件名称必须以大写字母开头。
例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。

组合组件

组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。
多考虑组件的可复用性，视情况细化组件粒度。

例如，我们可以创建一个 App 组件，用来多次渲染 Welcome 组件：

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

警告:
组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

Props的只读性

React是非常灵活的，但它也有一个严格的规则：

无论是使用 函数 或是 类 来声明一个组件，它决不能修改它自己的props！

组件定义及引入步骤

1. 首先创建一个Hello.js文件(在React中，约定成俗的习惯是组件命名首字母大写)

import React from 'react';
const hello = () => {
  return <p>Hello，React！</p>
};
export default hello;

2. 在需要引入的地方import，如果我们最常见的App.js文件里。

import Hello from './Hello/Hello';

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

效果如图：