React系列五（创建React组件） React系列五：创建React组件

快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
前言这节我们将介绍 React 中组件的类别，以及如何创建和使用组件。
本文会向你介绍以下内容：

创建类组件
创建函数组件
渲染组件
合成组件
提取组件
Props 是只读的

组件介绍组件(Components) 让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计。
从定义上来说，组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)，并返回 React 元素，用以描述屏幕显示内容。

Props ，即属性( Property)，在代码中写作 props，故可用 props 指代 properties。

react中有两种组件：类组件（class components）、函数组件（function components）
创建类组件类组件的定义有如下要求：

类组件需要继承自 React.Component
类组件必须实现render函数

在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。
使用class定义一个组件：

class App extends Component { constructor() { super() this.state = {} }render() { return Hello App } }

我们来详细分析一下类组件有哪几个部分

constructor：这是类组件的构造函数，是可选的，我们通常在constructor中初始化一些数据；
this.state：我们在constructor中给类组件加入state属性，你可以理解为组件中有一个state对象，其中包含着各种属性，用于维护组件内部的数据。同时你可以通过this.state.<属性名>访问该属性；
render()： 该方法是 class 组件中唯一必须实现的方法，类组件通过render()返回组件的显示内容；

关于 state
我们可以通过this.state给类组件添加数据对象，我们可以通过this.state.<属性名>去访问我们setState中的属性。

constructor(props) { super(props); this.state = { name:"xhs-rookies" } }render(){ return {this.state.name} }

但是我们想要修改上述例子中的name属性的时候，则必须通过react给我们规定好的setState()方法，去给state添加或者修改其中的数值。

this.state.name = 'new xhs-rookies' //错误的方式，不允许采用 this.setState({ name: 'new xhs-rookies' }) //正确的方式

简单点来说，在 react 中页面是通过数据进行渲染，使用 setState()更新的数据， react 会帮我们执行 render()去更新页面，从而将页面中用到 state 中的数据全部更新。

关于 render
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回很多类型，很多时候我们选择让该方法返回 React 元素，然后交由 React 去渲染展示：
React 元素：

通常通过 JSX 创建。
例如，会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件；
无论是还是均为 React 元素。

详细关于 render() 方法的内容请见 React.Component - Render)

创建函数组件函数组件是使用 function 来进行定义的函数，只是这个函数会返回和类组件中 render 函数返回一样的内容。
跟类组件相比，函数组件有自己的特点：

没有生命周期，也会被更新并挂载，但是没有生命周期函数；
没有 this(组件实例）；
没有内部状态（state）；

我们来定义一个函数组件：

export default function App() { return xhs rookies }

渲染组件在前几篇中, 我们只遇到代表 DOM 标签的 React 元素：

const element =

然而，元素也可以代表用户定义的组件：

const element =

当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。我们将其称为 “props” 对象。
比如, 以下代码在页面上渲染“xhs rookies”：

function Welcome(props) { return Hello, {props.name} }const element = ReactDOM.render(element, document.getElementById('root'))

我们简单解释一下上面这个例子:

我们调用了 ReactDOM.render() 方法并向其中传入了元素。
React 调用 Welcome 组件，并向其中传入了 {name: 'xhs rookies'} 作为 props 对象。
Welcome 组件返回 xhs rookies。
React DOM 迅速更新 DOM ，使其显示为 xhs rookies。

注意：组件名称总是以大写字母开始。
举例来说, 代表一个 DOM 标签，而则代表一个组件，并且需要在作用域中有一个 Welcome 组件。
你可以深入 JSX阅读更多关于这点背后的原因。

合成组件组件可以在它们的输出中引用其它组件。这使得我们可以使用同样的组件来抽象到任意层级。一个按钮，一个表单，一个对话框，一个屏幕：在 React 应用中，所有这些都通常描述为组件。
例如，我们可以创建一个 App 组件，并在其内部多次渲染 Welcome：

function Welcome(props) { return Hello, {props.name} }function App() { return ( ) }ReactDOM.render(, document.getElementById('root'))

通常，新的 React apps 都有一个单独的顶层 App 组件。然而，如果你在已有的应用中整合 React，你可以需要由下至上地, 从类似于 Button 这样的小组件开始, 逐渐整合到视图层的顶层。
提取组件不要害怕把一个组件分为多个更小的组件。
举个例子，思考下名 Comment 组件：

function Comment(props) { return ( {props.author.name}{props.text} {formatDate(props.date)}) }

它接受 author（一个对象），text（一个字符串）和 date（一个日期）作为 props。
这个组件修改起来很麻烦，因为它是被嵌套的，而且很难复用其中的某个部分。让我们从其中提取一些组件。
首先，提取头像 Avatar：

function Avatar(props) { return }

Avatar 组件不用关心它在 Comment 中是如何渲染的。这是为什么我们它的 prop 一个更通用的属性名: user, 而不是 author 的原因。
我们建议从组件本身的角度来命名 props 而不是它被使用的上下文环境。
我们可以稍微简化一下 Comment 组件:

function Comment(props) { return ({props.author.name}{props.text} {formatDate(props.date)}) }

接下来，我们提取用户信息 UserInfo 组件，用于将 Avatar 显示在用户名旁边：

function UserInfo(props) { return ({props.user.name}) }

这使我们可以进一步简化 Comment 组件：

function Comment(props) { return ( {props.text} {formatDate(props.date)}) }

提取组件可能看起来是一个繁琐的工作，但是在大型的 Apps 中可以回报给我们的是大量的可复用组件。一个好的经验准则是如果你 UI 的一部分需要用多次 (Button，Panel，Avatar)，或者本身足够复杂(App，FeedStory，Comment)，最好的做法是使其成为可复用组件。
Props 是只读的无论你用函数或类的方法来声明组件, 它都无法修改其自身 props. 思考下列 sum (求和)函数: