04. react 初次见面---组件&Props

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

1、组件定义的两种方式

1.1 函数定义组件

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

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

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

1.2 ES6 class 来定义组件

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

2、组件渲染

React元素也可以是用户自定义的组件。当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上段代码会在页面上渲染出”Hello,Sara”。这里定义组件使用的是第一种方式函数定义组件，我自己尝试了第二种 ES6 class方式来定义组件，报错。先往后学，再边学便理解。

官网上告诉我们上段代码执行过程如下：

我们对 <Welcome name="Sara" /> 元素调用了 ReactDOM.render() 方法。
React将 {name: 'Sara'}作为props传入并调用 Welcome组件。
Welcome组件将 <h1>Hello, Sara</h1>元素作为结果返回。
React DOM将DOM更新为 <h1>Hello, Sara</h1>。

警告:

组件名称必须以大写字母开头。

例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。

3. 组件组合

组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。

警告:

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

4. 提取组件

你可以将组件切分为更小的组件。

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

5. Props的只读性

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

来源：oschina

链接：https://my.oschina.net/u/3563169/blog/1605994

标签

react

组件

Props

SeasonQ