React

---

---

前言

React使用名为JSX的JavaScript语法扩展，允许直接在JavaScript中编写HTML。

因为JSX是JavaScript的语法扩展，所以实际上可以直接在JSX中编写JavaScript。

只需要在花括号中包含希望被视为JavaScript的代码。

由于浏览器不能解析JSX，所以必须将JSX代码编译为JavaScript，在这过程中就需要一些转换器之类的工具。

---

一、基础

1.创建一个简单的JSX元素

const JSX = <h1>Hello JSX!</h1>;

使用JSX将h1元素赋值给常量JSX。

2.创建一个复杂的JSX元素

关于嵌套的JSX，必须要知道的一点，就是它必须返回单个元素。

这个父元素将包裹所有其他级别的嵌套元素。

有效的JSX：

<div><p>Paragraph One</p><p>Paragraph Two</p><p>Paragraph Three</p>
</div>

无效的JSX：

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

几个作为兄弟元素而编写的JSX元素没有父元素包裹将不会被转换。

const JSX = (<div><h1></h1><p></p><ul><li></li><li></li><li></li></ul></div>
);

这个常量JSX，渲染一个div，依次包含h1、p和包含三个li的无序列表。

3.在JSX中添加注释

JSX的注释，使用{/* */}语法来包裹注释文本。

const JSX = (<div><h1>This is a block of JSX</h1><p>Here's a subtitle</p>{/* 注释 */}</div>
);

4.渲染HTML元素为DOM树

JSX是一种在JavaScript中编写可读HTML的便捷工具。

在React中，可以用它的渲染API将此JSX直接渲染到HTML DOM。

ReactDOM提供一个简单的方法来将React元素呈现给DOM：ReactDOM.render(componentToRender, targetNode)。
第一个参数是要渲染的React元素或组件，第二个参数是将组件渲染到的DOM节点。

必须在JSX元素声明之后调用ReactDOM.render()。

const JSX = (<div><h1>Hello World</h1><p>Lets render this to the DOM</p></div>
);ReactDOM.render(JSX, document.getElementById("challenge-node"));

5.在JSX中定义一个HTML Class

JSX与HTML一个关键区别是不能再使用class这个单词来定义HTML的class名，因为这是JavaScript的关键字，JSX使用className代替。

const JSX = (<div className="myDiv"><h1>Add a class to this div</h1></div>
);

6.自动闭合的JSX标记

JSX不同于HTML的另一个重要方面是自闭合标签。

在HTML中，几乎所有标签都有开始与结束标签：<div></div>。
HTML中还有一些自闭合标签，它们在另一个标签开始之前，不需要开始和结束标签都存在。

在JSX中，规则略有不同。
任何JSX元素都可以使用自闭合标签编写，并且每个元素都必须关闭。
例如换行标签必须始终编写为<br />，另外<div>可以写成<div />或者<div></div>。在第一个版本中，无法在<div />中包含任何内容。
这种语法在渲染React组件时很有用。

const JSX = (<div><h2>Welcome to React!</h2> <br /><p>Be sure to close all tags!</p><hr /></div>
);

二、组件

1.创建一个无状态的函数组件

组件是 React 的核心。React 中的所有内容都是一个组件。

有两种方法可以创建React组件。
第一种是使用JavaScript函数，以这种方法定义组件会创建无状态功能组件。

可以将无状态组件视为，可以接收数据并对其进行渲染的组件，但是它不管理或跟踪对数据的更改。

要使用函数创建组件，只需要编写一个返回JSX或null的JavaScript函数。

React要求函数名以大写字母开头。
下面是一个无状态功能组件的示例，该组件在JSX中分配一个HTML的class：

const DemoComponent = function() {return (<div className='customClass' />);
};

传输后，<div>将有一个CSS类”className“。

因为JSX组件代表HTML，所以可以将几个组件放在一起以创建更复杂的HTML页面，这是React提供的组件架构的关键优势之一。

它允许用许多独立的组件组成UI，这使得构建和维护复杂的用户界面变得更容易。

const MyComponent = function() {return (<div>asfasfasfasf</div>);
};

此函数返回包含一些文本字符串的单个div元素。

2.创建一个React组件

定义React组件的另一种方法是使用ES6的class语法。

class Kitten extends React.Component {constructor(props) {super(props);}render() {return (<h1>Hi</h1>);}
}

这将创建一个ES6类Kitten，它扩展了React.Component类。
因此Kitten类现在可以访问许多有用的React功能，例如本地状态和生命周期钩子（？）。

另外Kitten类中定义了一个调用super()方法的constructor，它使用super()方法调用父类的构造函数，即这里的React.Component。

class MyComponent extendsReact.Component {constructor(props) {super(props);}render() {return (<div><h1>Hello React!</h1></div>)};
};

MyComponent是使用类语法在代码编辑器中定义的。
编写了render方法，它返回div元素，其中包含有内容的h1元素。

3.用组合的方式创建一个React组件

现在来组合多个React组件。
此时正在构建一个应用程序，并创建了三个组件：Navbar、Dashboard和Footer。

要组合它们，可以创建一个App父组件，将这三个组件分别渲染成子组件。

要渲染子组件，需要在JSX中包含作为自定义HTML标签编写的组件名称。
例如在render方法中：

return (
<App><Navbar /><Dashboard /><Footer />
</App>
)

像这里组件名称包含在< />中，当React遇到引用另一个组件的自定义HTML标签时，它在标签的位置渲染该组件的标签。

这可以说明App组件和那三个之间的父子关系。

下面有一个名为ChildComponent的简单功能组件和一个名为ParentComponent的React组件，通过在ParentComponent中渲染ChildComponent，来将两者组合起来。

const ChildComponent = () => {return (<div><p>I am the child</p></div>);
};class ParentComponent extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>I am the parent</h1><ChildComponent /></div>);}
};

就<ChildComponent />就行了。

4.使用React渲染嵌套组件

还有许多不同的方法可以把React组件组合在一起。

组件组合是React强大功能之一。
使用React的时候，应该先用组件的思路考虑清除用户界面的解构。

可以将UI分解为基本的构建块，这些构建块就是组件。
反正有的是好处。

const TypesOfFruit = () => {return (<div><h2>Fruits:</h2><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul></div>);
};const Fruits = () => {return (<div><TypesOfFruit /></div>);
};class TypesOfFood extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>Types of Food:</h1><Fruits /></div>);}
};

这里有两个功能组件，TypeOfFruit和Fruits，把前者放到后者中，然后把后者放到TypesOfFood组件中。

5.组合React组件

在其他组件中渲染ES6风格的类组件和渲染简单组件没什么不同。

可以在其他组件中渲染JSX元素、无状态功能组件和ES6类组件。

class Fruits extends React.Component {constructor(props) {super(props);}render() {return (<div><h2>Fruits:</h2><NonCitrus /><Citrus /></div>);}
};class TypesOfFood extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>Types of Food:</h1><Fruits /><Vegetables /></div>);}
};

在Fruits中嵌套两个组件，NonCitrus和Citrus，别在意它们是哪来的。

然后将Fruits类组件嵌到TypesOfFood中。

总之就是一系列嵌套的组件。
它们使用两种不同的组件类型。

6.渲染class组件为Dom树

使用ReactDOM API将JSX元素渲染到DOM，这与渲染React组件的过程十分相似。

如果不调用ReactDOM API，编写的任何React代码都不会渲染到DOM。
ReactDOM.render(componentToRender, targetNode)。

第一个参数是要渲染的React组件，第二个参数是要在其中渲染该组件的DOM节点。

class TypesOfFood extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>Types of Food:</h1><Fruits /><Vegetables /></div>);}
};ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))

没人想知道Fruits和Vegetables组件在哪，将这两个组件渲染为TypesOfFood组件的子组件，然后将TypesOfFood渲染到id为challenge-node的div中。

第二个参数得用document.getElementById('challenge-node')这种格式。

三、重新开始写一个React组件

1.都可以写

React组件是React应用程序的核心组成部分，因此要熟练编写它。

典型的React组件是ES6class，它扩展了React.Component。它有一个返回HTML（从JSX返回）或null的渲染方式，这是React组件的基本形式。

class MyComponent extends React.Component {constructor(props) {super(props);}render() {return (<div id='challenge-node'><h1>My First React Component!</h1></div>);}
};
ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));

定义一个MyComponent类，它是React.Component的扩展。
它的渲染方法返回一个div，其中包含一个h1标签，有一些文本。
然后使用ReactDOM.render()把该组件渲染到DOM中，这里是id='challenge-node'的div。

2.将Props传递给无状态函数组件

React中的另一个常见特性propr。
在React中，可以将属性传递给子组件。
假设有一个App组件，该组件渲染一个名为Welcome的子组件，它是一个无状态函数组件。

通过以下方式给Welcome传递一个user属性。

<App><Welcome user='Mark' />
</App>

使用自定义HTML属性，React支持将属性user传递给组件Welcome。
由于Welcome是一个无状态函数组件，它可以像这样访问数值：

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

当处理无状态函数组件时，基本上可以将其视为返回JSX的函数的参数。
这样就可以在函数体中访问该值。
但对于类组件，访问方式略有不同。

const CurrentDate = (props) => {return (<div><p>The current date is: {props.date}</p></div>);
};class Calendar extends React.Component {constructor(props) {super(props);}render() {return (<div><h3>What date is it?</h3><CurrentDate date={Date()}/> </div>);}
};

两个组件，Calendar和CurrentDate。
从Calendar组件渲染CurrentDate时，从JavaScript的Date对象分配当前日期，并将其作为date属性传入。（<CurrentDate date={Date()}/>）

然后访问CurrentDate组件的prop，并在p标签中显示其值。（<p>The current date is: {props.date}</p>）

要将prop的值视为JavaScript，需要将它们括在花括号中，例如date={Date()}。

3.传递一个数组

要将数组传递给JSX元素，必须将其视为JavaScript，所以得用花括号括起来：

<ParentComponent><ChildComponent colors={["green", "blue", "red"]} />
</ParentComponent>

这样子组件就可以访问数组属性colors。访问属性时可以使用join()等数组方法。

const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>

这将把所有colors数组项连接成一个逗号分隔的字符串并生成<p>green, blue, red</p>。

const List= (props) => {return <p>{props.tasks.join(", ")}</p>};class ToDo extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>To Do Lists</h1><h2>Today</h2><List tasks={["a", "a", "d"]}/><h2>Tomorrow</h2><List tasks={["s", "sas", "dsa"]}/></div>);}
};

两个组件，List和ToDo。
在ToDo组件中渲染每个List时，传入tasks属性并分配给数组。
然后访问List组件中的tasks数组，在p元素中显示其值。

使用join把数组作为逗号分隔显示。

4.使用默认的Props

React还有一个设置默认props的选项。

可以将默认props作为组件本身的属性分配给组件，React会在必要时分配默认prop。

如果没有显式提供任何值，这允许指定prop值应该是什么。
例如声明MyComponent.defaultProps = { location: 'San Francisco' }，就是定义一个location属性，并且其值在没有另行指定的情况下被设置为'San Francisco'。

如果props未定义，React会分配默认props，如果将null作为prop的值，将保持null。

const ShoppingCart = (props) => {return (<div><h1>Shopping Cart Component</h1></div>)
};ShoppingCart.defaultProps = { items: 0};

这个ShoppingCart组件定义了默认props，它指定一个itemsprop，其值为0。

5.覆盖默认的Props

在React中，设置默认的props是很有用的特性。
显式设置组件的prop值即可覆盖默认props。

const Items = (props) => {return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}Items.defaultProps = {quantity: 0
}class ShoppingCart extends React.Component {constructor(props) {super(props);}render() {return <Items quantity = {10}/>}
};

ShoppingCart组件现在渲染了一个子组件Items。
Items组件有一个默认quantityprop，其值被设置为0。

通过传入数值10来覆盖quantity的默认prop。（<Items quantity = {10}/>）

6.使用PropType来定义所期望的Props

React提供有用的类型检查特性，以验证组件是否接收了正确类型的props。

例如想将数据作为prop传递给组件，可以在组件上设置propTypes，以要求数据类型为array。
当数据是任何其他类型时，都会抛出警告。

当提前知道prop的类型时，最好的做法就是设置propTypes，用起来与defaultProps一样。

MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }

名为handleClick的prop应该为function类型。

PropTypes.func部分检查handleClick是否为函数，isRequired告诉React，handleClick是该组件的必须属性。
如果未提供该prop，将看到警告信息。

func代表function，在七种JavaScript基本类型中，function和boolean(bool)是仅有的使用异常拼写的两种类型。

除了可以检查基本类型，还有其他类型可用。比如可以检查prop是否为React组件。

下面又是一个例子：

const Items = (props) => {return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};Items.propTypes = {quantity: PropTypes.number.isRequired};Items.defaultProps = {quantity: 0
};class ShoppingCart extends React.Component {constructor(props) {super(props);}render() {return <Items />}
};

Items定义propTypes，要求quantity作为prop，并验证它是number类型。

7.使用this.props访问Props

如果接受prop的子组件不是无状态函数组件，而是一个ES6类组件，访问props的方法略有不同。

任何时候，只要引用类组件本身，就要使用this关键字。
要访问类组件中的props，需要在访问它的代码前面添加this。
例如ES6类组件有一个名为data的prop，可以在JSX中这样写：{this.props.data}。

class ReturnTempPassword extends React.Component {constructor(props) {super(props);}render() {return (<div><p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p></div>);}
};class ResetPassword extends React.Component {constructor(props) {super(props);}render() {return (<div><h2>Reset Password</h2><h3>We've generated a new temporary password for you.</h3><h3>Please reset this password from your account settings ASAP.</h3><ReturnTempPassword tempPassword="xsadxdasd" /></div>);}
};

在父组件ResetPassword中渲染ReturnTempPassword组件的一个实例。（<ReturnTempPassword tempPassword="xsadxdasd" />）

在这里是为ReturnTempPassword提供一个tempPasswordprop，并赋值给prop一个字符串。

然后在子组件ReturnTempPassword中，访问strong标签中的tempPasswordprop。
（<p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>）

8.如何使用Props和无状态函数组件

无状态的函数组件，这些组件就像纯函数，它们接收props作为输入，并在每次传递相同props时返回相同的视图。

一些术语：

无状态函数组件是一个函数，它接收props作为输入并返回JSX。

无状态组件是一个类，它扩展了React.Component，但是不使用内部状态。

状态组件是指维护其自身内部状态的组件，简称组件或React组件。

一种常见的应用模式是，尽可能减少状态组件并创建无状态的函数组件。
这有助于将状态管理包含到应用程序的特定区域。反过来，通过更容易地跟踪状态变化如何影响其行为，可以改进应用程序的开发和维护。

都是好事。

class CampSite extends React.Component {constructor(props) {super(props);}render() {return (<div><Camper/></div>);}
};

这里有一个CampSite组件，它把Camper组件渲染为自己的子组件。

const Camper = props => <p>{props.name}</p>;Camper.defaultProps = {name: 'CamperBot'};Camper.propTypes = {name: PropTypes.string.isRequired};

定义了Camper组件，并为其分配默认props{name: 'CamperBot'}。
在Camper组件内部渲染一个p元素，它只包含作为prop传递的name值。
在Camper组件上定义propTypes，要求提供name作为prop，并验证它是string类型。

四、状态

1.创建一个有状态的组件

React中最重要的主题之一是state，即所谓的状态。state包含应用程序需要了解的任何数据。这些数据可能会随时间变化。

可以在constructor中的组件类上声明state属性来在React组件中创建state，它在创建时使用state初始化组件。state属性必须设置为JavaScript对象。

this.state = {// 在这里描述状态
}

可以在组件的整个生命周期内访问state对象，可以更新它，在UI中渲染它，也可以将其作为props传递给子组件。

必须通过扩展React.Component来创建类组件，以便像这样创建state。

有一个组件试图从其state中渲染一个name属性，但是state还没有定义。

class StatefulComponent extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>{this.state.name}</h1></div>);}
};

只要在super下面添加

this.state = {name: "aaa"};

2.在用户界面中渲染状态

一旦定义了组件的初始state，就可以在要渲染的UI中显示它的任何部分。

如果组件是有状态的，它将始终可以访问render()方法中state的数据。
就可以使用this.state访问数据。

如果想在render方法的return中访问state值，必须把这个值用花括号括起来。

state实在是太强大了！
它可以跟踪应用程序中的重要数据，并根据数据的变化渲染UI。
如果数据发生变化，UI也会发生变化。
React使用所谓的虚拟DOM来跟踪幕后的变化，当state数据更新时，它会使用该数据触发组件的重新渲染，包括接受prop数据的子组件。
React只在必要的时候更新实际的DOM，这意味着不用担心DOM的变更，只需声明UI的外观。

如果组件有状态，则没有其他组件知道它的state，它的state是完全封装的，或者说局限于组件本身的，除非将state数据作为props传递给子组件。

封装state的概念很重要，因为它允许编写特定的逻辑，并将该逻辑包含并隔离在代码种的某个地方。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {name: 'freeCodeCamp'}}render() {return (<div><h1>{this.state.name}</h1></div>);}
};

MyComponent是一个有状态组件，在组件的render方法中定义了h1标签，该方法从组件的state渲染name的值。

3.以另一种方式在用户界面中渲染状态

还有一种方法可以访问组件中的state。在render方法中，在return语句之前，可以直接编写JavaScript。
例如可以声明函数，从state或props访问数据，对此数据执行计算等。然后可以将任何数据赋值给return语句中可以访问的变量。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {name: 'freeCodeCamp'}}render() {const name = this.state.name;return (<div><h1>{name}</h1></div>);}
};

在MyComponent的render方法中，定义了名为name的常量，并将其设置为组件state中的name值。
（const name = this.state.name;）
然后在return语句中，在h1标签中渲染变量name的值。
（<h1>{name}</h1>）

4.用this.setState设置状态

还有一种方法可以更改组件的state，React提供了setState方法来更新组件的state。
在组件类中调用setState方法：

this.setState()

传入键值对的对象，其中键是state属性，值是更新后的state数据。
例如在state中储存username，并想要更新它：

this.setState({username: 'Lewis'
});

React不希望直接修改state，而是在state发生改变时始终使用this.setCtate()。

另外React可以批量处理多个state更新以提高性能，这意味着通过setState方法进行的state更新可以是异步的。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {name: 'Initial State'};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({name: 'React Rocks!'});}render() {return (<div><button onClick={this.handleClick}>Click Me</button><h1>{this.state.name}</h1></div>);}
};

这里有一个button元素，它有一个onClick()处理程序。当button在浏览器中接受到单击事件时触发此处理程序，并运行MyComponent中定义的handleClick方法。

在handleClick方法中，使用this.setState()更新组件中的state，设置state中的name属性为字符串React Rocks!。

5.将this绑定到class方法

除了设置与更新state之外，还可以为组件类定义方法。
类方法通常需要使用this关键字，以便它可以访问方法中的类的属性（如state和props）。
有几种方法可以让类方法访问this。

一种常见的方法是在构造函数中显式绑定this，这样当组件初始化时，this就会绑定到类方法。

在类方法中调用像this.setState()这样的函数时，this指的是这个类，而不是undefined。

令人迷惑

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {itemCount: 0};//这里应该有this.addItem = this.addItem.bind(this);//}addItem() {this.setState({itemCount: this.state.itemCount + 1});}render() {return (<div>//按钮接收到单击事件时，应该触发addItem方法<button onClick={this.addItem}>Click Me</button>//<h1>Current Item Count: {this.state.itemCount}</h1></div>);}
};

这有一个带state的组件，用于跟踪项目计数，它有一个方法，允许增加此项目的计数。

但是该方法不起作用，因为它使用了未定义的this关键字，可以通过将this显式绑定到组件构造函数中的addItem()方法来修复它。
（this.addItem = this.addItem.bind(this);）

然后向render方法中的button元素添加一个单击处理程序，当按钮接收到单击事件时，它应该触发addItem()方法。
（<button onClick={this.addItem}>）

6.使用state切换元素

可以用更复杂的方式在React应用程序中使用state，例如监视值的状态，然后根据值有条件地渲染UI。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {visibility: false};this.toggleVisibility = this.toggleVisibility.bind(this);}toggleVisibility() {this.setState(state => {if(state.visibility === true) {return { visibility: false };} else {return { visibility: true};}})};render() {if (this.state.visibility) {return (<div><button onClick={this.toggleVisibility}>Click Me</button><h1>Now you see me!</h1></div>);} else {return (<div><button onClick={this.toggleVisibility}>Click Me</button></div>);}}
};

MyComponent有一个初始值为false的visibility属性。
如果visibility的值为true，render返回一个视图，如果为false，返回另一个视图。

首先定义toggleVisibility方法，以便visibility的state在调用方法时切换到相反的值，如果visibility是false，则该方法将其设置为true，反之亦然。

需要用花括号来将其视为JavaScript。

然后将this关键字绑定到构造函数中的方法上。
（this.toggleVisibility = this.toggleVisibility.bind(this);）

7.一个简单的计数器

这包括初始化state，编写设置state的方法，以及指定单击处理程序来触发这些方法。

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0};// 这里绑定方法}// 这里编写方法render() {return (<div><button className='inc' onClick={this.increment}>Increment!</button><button className='dec' onClick={this.decrement}>Decrement!</button><button className='reset' onClick={this.reset}>Reset</button><h1>Current Count: {this.state.count}</h1></div>);}
};

Counter组件跟踪state中的count值，有两个按钮分别调用increment()和decrement()方法。
编写这些方法，使计数器值在单击相应按钮时增加或减少1。
另外还有个reset()方法，当单击reset按钮时，把计数设置为0。

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0};this.increment = this.increment.bind(this);this.decrement = this.decrement.bind(this);this.reset = this.reset.bind(this);}increment() {this.setState({count: this.state.count + 1});}decrement() {this.setState({count: this.state.count - 1});}reset() {this.setState({count: this.state.count = 0});}render() {return (<div><button className='inc' onClick={this.increment}>Increment!</button><button className='dec' onClick={this.decrement}>Decrement!</button><button className='reset' onClick={this.reset}>Reset</button><h1>Current Count: {this.state.count}</h1></div>);}
};

难得乱杀一次。

8.创建一个可以控制的输入框

应用程序可能在state和渲染的UI之间有更复杂的交互。
比如用于文本输入的表单控件元素（如input和textarea）在用户键入时，在DOM中维护自己的state。
通过React，可以将这种可变state转移到React组件的state中。
用户的输入变成了应用程序state的一部分，因此React控制该输入字段的值。
通常React组件具有用户可以键入的输入字段，那么它将是一个受控的输入表单。

class ControlledInput extends React.Component {constructor(props) {super(props);this.state = {input: ''};}handleChange(event) {this.setState({input: event.target.value});}render() {return (<div><input value = {this.state.input} onChange = {this.handleChange.bind(this)}></input><h4>Controlled Input:</h4><p>{this.state.input}</p></div>);}
};

这里有一个名为ControlledInput的组件框架，用于创建受控的input元素。
组件的state已经被包含空字符串的input属性初始化。这个值表示用户在input字段中键入的文本。

定义了handleChange()方法，该方法有一个名为event的参数。
该方法被调用时，接收一个event对象，该对象包含一个来自input元素的字符串文本。
可以使用方法内的event.target.value来访问这个字符串。用这个新字符串更新组件的state的input属性。

在render方法中，h4标签之上创建的input元素，有一个value属性，它等于组件的state的input属性。
然后有个onChange()事件处理程序，设置到handleChange()方法。

在输入框中键入时，该文本由handleChange()方法处理，该文本被设置为本地state中的input属性，并渲染在页面上的input框中。
组件state是输入数据的唯一真实来源。

9.创建一个可以控制的表单

React能控制某些元素的内部state，比如input和textarea，这使得这些元素成为受控组件。
这也适用于其他表单元素，比如常规的HTML表单form元素。

MyForm组件中是一个带有提交处理程序的空form元素，提交处理程序将在提交表单时调用。

有一个提交表单的按钮，它的type被设置为submit，表明它是控制表单的按钮。

class MyForm extends React.Component {constructor(props) {super(props);this.state = {input: '',submit: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({input: event.target.value});}handleSubmit(event) {// // 完成这个方法，以便将组件state属性submit设置为本地state下的当前输入值// }render() {return (<div><form onSubmit={this.handleSubmit}>//// 在这添加input元素，并设置其value和onChange()属性//<button type='submit'>Submit!</button></form>//// 在这创建h1标签，该标签从组件的state渲染submit的值//</div>);}
};

class MyForm extends React.Component {constructor(props) {super(props);this.state = {input: '',submit: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({input: event.target.value});}handleSubmit(event) {event.preventDefault()this.setState({submit: this.state.input});}render() {return (<div><form onSubmit={this.handleSubmit}><input value={this.state.input} onChange={this.handleChange}></input><button type='submit' value={this.state.submit} onClick={this.handleSubmit.bind(this)}>Submit!</button></form><h1>{this.state.submit}</h1></div>);}
};

创建的input元素，其value属性设置为位于state中的input变量，状态可以通过this.state来访问。（this.state.input）然后设置input元素的onChange属性以调用函数handleChange。

然后创建handleSubmit方法，首先得防止页面刷新，在提交处理程序（handleSubmit）中调用event.preventDefault()，就能防止默认的表单提交行为刷新网页。
再调用setState()方法，传入要更改的不同键值对的对象。
这种情况下，需要将submit设置为变量input的值，并将input初始化设置为空字符串。

在表单下面创建h1标签，在其中输入当前值submit，因为submit位于state中，所以得使用this.state。

10.将State作为Props传递给子组件

关于将props传递给子JSX元素和子React组件的例子，中的那些props是从哪来的。
一个常见的模式是：有状态组件中包含对应用程序很重要的state，然后用它渲染子组件。有人希望这些组件能够访问该state的某些部分，就把这些部分作为props传入。

例如有一个App组件可以渲染Navbar以及其他组件。
在App中，state包含大量用户信息，但是Navbar只需要访问用户的用户名就可以显示出来，这时将该state作为一个prop传递给Navbar组件即可。

这个模式说明了React中的一些重要范例。第一个是单向数据流，state沿着应用程序组件树的一个方向流动，从有状态父组件到子组件，子组件只接收它们需要的state数据。
第二，复杂的有状态应用程序可以分解成几个，或者可能是一个单一的有状态组件。其余组件只是从父组件简单地接收state作为props，并从该state渲染UI。

它开始创建一种分离，在这种分离中，state管理在代码的一部分中处理。将state逻辑与UI逻辑分离是React的关键原则之一。当它被正确使用时，它使得复杂的、有状态的应用程序的设计变得更容易管理。

class MyApp extends React.Component {constructor(props) {super(props);this.state = {name: 'CamperBot'}}render() {return (<div><Navbar /* 代码 */ /></div>);}
};class Navbar extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>Hello, my name is: /* 代码 */ </h1></div>);}
};

MyApp组件是有状态的，它将Navbar组件渲染成它的子组件。
现在要把MyApp组件state中的name属性向下传递给子组件（即Navbar），然后在h1标签中显示name，name是Navbarrender方法的一部分。

class MyApp extends React.Component {constructor(props) {super(props);this.state = {name: 'CamperBot'}}render() {return (<div><Navbar name={this.state.name} /></div>);}
};class Navbar extends React.Component {constructor(props) {super(props);}render() {return (<div><h1>Hello, my name is: {this.props.name} </h1></div>);}
};

调用this.state.name来传递name: 'CamperBot'到Navbar组件。
（<Navbar name={this.state.name} />）

因为把CamperBot状态值传入了Navbar上面的组件，下面的h1元素就将呈现传递的值。
（{this.props.name}）

11.传递回调作为Props

可以将state作为props传递给子组件，但不仅限于传递数据。
可以将处理函数或在React组件中定义的任何方法传递给子组件。

这就是允许子组件与父组件交互的方式。可以把方法像普通prop一样传递给子组件，它会被分配一个名字，可以在子组件中的this.props下访问该方法的名字。

class MyApp extends React.Component {constructor(props) {super(props);this.state = {inputValue: ''}this.handleChange = this.handleChange.bind(this);}handleChange(event) {this.setState({inputValue: event.target.value});}render() {return (<div>// 代码</div>);}
};class GetInput extends React.Component {constructor(props) {super(props);}render() {return (<div><h3>Get Input:</h3><inputvalue={this.props.input}onChange={this.props.handleChange}/></div>);}
};class RenderInput extends React.Component {constructor(props) {super(props);}render() {return (<div><h3>Input Render:</h3><p>{this.props.input}</p></div>);}
};

这有三个组件。MyApp是父组件，GetInput和RenderInput是它的子组件。

将GetInput组件添加到MyApp的render方法，然后创建一个名为input的prop，将MyApp的state中的inputValue传给它。
（<GetInput input={this.state.inputValue} handleChange={this.handleChange}/>）
还要创建一个名为handleChange的prop，并将输入处理程序handleChange传递给它。

然后将RenderInput添加到MyApp中的render方法中，创建一个名为input的prop，并将state中的inputValue传递给它。
（<RenderInput input={this.state.inputValue}/>）

现在就可以在GetInput组件中的input字段中键入内容，然后该组件通过props调用其父组件中的处理函数方法。
这将更新处于父组件中的state中的input，该input将作为props传递给两个子组件。

class MyApp extends React.Component {constructor(props) {super(props);this.state = {inputValue: ''}this.handleChange = this.handleChange.bind(this);}handleChange(event) {this.setState({inputValue: event.target.value});}render() {return (<div><GetInput input={this.state.inputValue} handleChange={this.handleChange}/><RenderInput input={this.state.inputValue}/></div>);}
};class GetInput extends React.Component {constructor(props) {super(props);}render() {return (<div><h3>Get Input:</h3><inputvalue={this.props.input}onChange={this.props.handleChange}/></div>);}
};class RenderInput extends React.Component {constructor(props) {super(props);}render() {return (<div><h3>Input Render:</h3><p>{this.props.input}</p></div>);}
};

五、生命周期

1.使用生命周期方法：componentWillMount

React组件有几种特殊方法，可以在组件生命周期的特定点执行操作。
这些被称为生命周期方法或生命周期钩子，允许在特定时间点捕获组件。
这可以在渲染之前、更新之前、接收props之前、卸载之前等等。
以下是一些主要生命周期方法：

componentWillMount()componentDidMount()componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()componentDidUpdate()componentWillUnmount()

当组件被挂载到DOM时，componentWillMount()方法在render()方法之前被调用。

class MyComponent extends React.Component {constructor(props) {super(props);}componentWillMount() {// change code below this lineconsole.log('safadasasdas')// change code above this line}render() {return <div />}
};

在componentWillMount()中会将一些内容记录到控制台。

2.使用生命周期方法：componentDidMount

某些时候，大多数web开发人员需要调用API端点来检索数据。知道在哪里执行这个动作是很重要的。

将组件装载到DOM后会调用此方法。
此处对setState()的任何调用都将触发组件的重新渲染。
在此方法中调用API并使用API返回的数据设置state时，一旦收到数据，它将自动触发更新。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {activeUsers: null};}componentDidMount() {setTimeout( () => {this.setState({activeUsers: 1273});}, 2500);}render() {return (<div><h1>Active Users: { this.state.activeUsers }</h1></div>);}
};

componentDidMount()中有一个模拟API调用。
它在2.5秒之后设置state，以模拟调用服务器检索数据。这里是请求站点的当前活动用户总数。
在render方法中，activeUsers渲染到了h1标签中。

3.添加事件监听器

componentDidMount()方法也是添加特定功能所需的任何事件监听器的最佳位置。

React提供一个合成事件系统，它将本地事件系统封装在浏览器里。
这意味着，不管用户的浏览器如何，合成事件系统的行为都完全相同，即使不同浏览器之间的本地事件的行为可能不同。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {message: ''};this.handleEnter = this.handleEnter.bind(this);this.handleKeyPress = this.handleKeyPress.bind(this);}// componentDidMount() {document.addEventListener("keydown", this.handleKeyPress);}componentWillUnmount() {document.removeEventListener("keydown", this.handleKeyPress);}// handleEnter() {this.setState({message: this.state.message + 'You pressed the enter key! '});}handleKeyPress(event) {if (event.keyCode === 13) {this.handleEnter();}}render() {return (<div><h1>{this.state.message}</h1></div>);}
};

在componentDidMount()方法中为keydown事件添加事件监听器，并让这些事件触发回调handleKeyPress()。
可以使用document.addEventListener()，它将事件作为第一个参数，要用引号括起来，将回调作为第二个参数。
（document.addEventListener("keydown", this.handleKeyPress);）

在componentWillUnmount()中移除相同的事件监听器，把相同的参数传递给document.removeEventListener()
（document.removeEventListener("keydown", this.handleKeyPress);）

4.使用生命周期方法管理更新

另一个生命周期方法是componentWillReceiveProps()，只要组件将要接收新的props就会调用它。

此方法接收新的props（通常写为nextProps）作为参数。
可以使用此参数并与this.props进行比较，并在组件更新前执行操作。

例如可以在处理更新前在本地调用setState()。

还有个方法是componentDidUpdate()，它在组件重新渲染后立即调用。

渲染和装载在组件生命周期中是不同的。
当页面第一次加载时，所有组件都被装载，这就是调用componentWillMount()和componentDidMount()等方法的地方。
然后随着state的变化，组件会重新渲染自己。

class Dialog extends React.Component {constructor(props) {super(props);}componentWillUpdate() {console.log('Component is about to update...');}componentWillReceiveProps(nextProps) {console.log(this.props);console.log(nextProps);}componentDidUpdate() {console.log('asdasd')}render() {return <h1>{this.props.message}</h1>}
};class Controller extends React.Component {constructor(props) {super(props);this.state = {message: 'First Message'};this.changeMessage = this.changeMessage.bind(this);}changeMessage() {this.setState({message: 'Second Message'});}render() {return (<div><button onClick={this.changeMessage}>Update</button><Dialog message={this.state.message}/></div>);}
};

子组件Dialog从其父组件Controller接收messageprops。
在Dialog组件中的componentWillReceiveProps()方法，将this.props和nextProps记录到控制台。
然后是componentDidUpdate()，并记录了一条说明组件已更新的语句，此方法的工作方式类似于componentWillUpdate()。

控制台语句的顺序显示了调用方法的顺序。

5.使用shouldComponentUpdate优化重新渲染

目前为止，如果任何组件接收到新的state或新的props，它会重新渲染自己及其所有子组件。是通常是好事。

React提供一种生命周期方法，当子组件接收到新的state或props时，可以调用此方法，并特别声明组件是否应该更新。
方法是shouldComponentUpdate()，它将nextProps和nextState作为参数。

这是优化性能的有效方法。例如，默认行为是，当组件接收到新的props时，即使props没有改变，它也会重新渲染。
所以使用shouldComponentUpdate()比较props来防止这种情况。

该方法返回一个布尔值，该值告诉React是否更新组件。
可以比较当前的props（this.props）和下一个props（nextProps），以确定是否需要更新，并相应返回true或false。

class OnlyEvens extends React.Component {constructor(props) {super(props);}shouldComponentUpdate(nextProps, nextState) {console.log('Should I update?');//if(nextProps.value % 2 == 0) {return true;}return false;}//componentWillReceiveProps(nextProps) {console.log('Receiving new props...');}componentDidUpdate() {console.log('Component re-rendered.');}render() {return <h1>{this.props.value}</h1>}
};class Controller extends React.Component {constructor(props) {super(props);this.state = {value: 0};this.addValue = this.addValue.bind(this);}addValue() {this.setState({value: this.state.value + 1});}render() {return (<div><button onClick={this.addValue}>Add</button><OnlyEvens value={this.state.value}/></div>);}
};

shouldComponentUpdate()方法在名为OnlyEvens的组件中。
OnlyEvens仅在其新props的value为偶数时更新。

 shouldComponentUpdate(nextProps, nextState) {console.log('Should I update?');if(nextProps.value % 2 == 0) {return true;}return false;}

六、内联样式

1.内联样式

还有一堆复杂的概念可以为React代码增加更强大的功能。
还有一些简单的问题，比如如何对在React中创建的JSX元素进行风格化。

众所周知，将class应用于JSX元素的方式与HTML中的使用并不完全相同。

如果从样式表导入样式，那就没有太大不同。
使用className属性将class应用于JSX元素，并将样式应用于样式表中的class。
另一种选择是使用内联样式，这在ReactJS开发中很常见。

将内联样式应用于JSX元素，类似于在HTML中的操作，但有一些JSX差异，以下是HTML中内联样式的示例：

<div style="color: yellow; font-size: 16px">Mellow Yellow</div>

JSX元素使用style属性，但是由于JSX的传输方式，不能将值设为字符串，相反，应该设置为JavaScript对象：

<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>

fontSize属性使用了驼峰式命名，因为React不会接受样式对象中的连字符。React将在HTML中应用正确的属性名称。

class Colorful extends React.Component {render() {return (<div style={{color: "red", fontSize: 72}}>Big Red</div>);}
};

字体大小可以设置为数字，省略单位px，或者写为"72px"。
加单位就得加引号。

2.在React中添加内联样式

除了设置为JavaScript对象的style属性之外，与HTML内联样式相比，React的内联样式还有几个语法差异。

首先某些CSS样式属性的名称使用驼峰式命名，例如fontSize和font-size。
对于JavaScript对象属性来说，像font-size这样的连字符命名是无效的语法，所以React使用驼峰式命名。
通常任何连字符的style属性在JSX中都是用驼峰式命名。

除非另有规定，否则所有属性值是长度的(如height、width和fontSize)其单位都假定为px。
例如，如果要使用em，可以用引号将值和单位括起来，像fontSize: "4em"。
除了默认为px的长度值之外，其他所有属性都应该用括号。

如果有大量样式，可以将style对象分配给一个常量，以保持代码的有序。

const styles = {color: "purple", fontSize: 40, border: "2px solid purple"}class Colorful extends React.Component {render() {return (<div style={styles}>Style Me!</div>);}
};

3.在React Render方法中使用JavaScript

使用花括号{}将JavaScript代码插入到JSX代码中，用于访问props、传递props、访问state、在代码中插入注释以及定制组件样式等。
这些都是将JavaScript放在JSX中的常见用例，但是在React组件中使用JavaScript代码还有其他方式。

在render方法中编写JavaScript，可以把JavaScript直接放在return语句之前，而不必插入花括号里。
这是因为它还不在JSX代码中。
当想在return语句中的JSX代码中使用变量时，可以将变量名放在花括号里。

const inputStyle = {width: 235,margin: 5
}class MagicEightBall extends React.Component {constructor(props) {super(props);this.state = {userInput: '',randomIndex: ''}this.ask = this.ask.bind(this);this.handleChange = this.handleChange.bind(this);}ask() {if (this.state.userInput) {this.setState({randomIndex: Math.floor(Math.random() * 20),userInput: ''});}}handleChange(event) {this.setState({userInput: event.target.value});}render() {const possibleAnswers = ['It is certain','It is decidedly so','Without a doubt', 'Yes, definitely','You may rely on it','As I see it, yes','Outlook good','Yes','Signs point to yes','Reply hazy try again','Ask again later','Better not tell you now','Cannot predict now','Concentrate and ask again','Don\'t count on it', 'My reply is no','My sources say no','Most likely','Outlook not so good','Very doubtful'];const answer = possibleAnswers[this.state.randomIndex]return (<div><inputtype="text"value={this.state.userInput}onChange={this.handleChange}style={inputStyle} /><br /><button onClick={this.ask}>Ask the Magic Eight Ball!</button><br /><h3>Answer:</h3><p>{answer}</p></div>);}
};

render方法中有一个包含20个短语的数组，用于表示20世纪80年代经典魔术八球玩具中的答案。
绑定ask按钮到按钮的单击事件，每次单击的时候，将生成随机数并将随机数储存为state中的randomIndex。

answer常量，每次组件更新时，代码随机访问possibleAnswers数组的不同索引。
（const answer = possibleAnswers[this.state.randomIndex]）
索引就是上面单击按钮时生成的随机数。

最后在p内插入answer常量。
每次单击按钮时，生成随机数，随机数作为索引访问数组里的数据，显示在p里。

4.使用if/else条件进行渲染

使用JavaScript控制渲染视图的另一个应用是将渲染的元素绑定到一个条件。
当条件为真时，呈现一个视图，反之呈现另一个视图。

可以在React组件的render()方法中使用标准的if/else语句来实现这一点。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {display: true}this.toggleDisplay = this.toggleDisplay.bind(this);}toggleDisplay() {this.setState({display: !this.state.display});}render() {if(this.state.display) {return (<div><button onClick={this.toggleDisplay}>Toggle Display</button><h1>Displayed!</h1></div>);} else {return (<div><button onClick={this.toggleDisplay}>Toggle Display</button></div>);}}
};

MyComponent的state中包含一个布尔值，（this.state = { display: true }）用于跟踪是否要在UI中显示某个元素。
按钮切换此值的状态。
用if/else语句写了render()方法，如果display为true则返回当前标记，否则返回不带h1的标记。

5.使用&&获得更简洁的条件

if/else语句很有效。
还有一种更简洁的方法可以达到同样的效果。

假设正在跟踪组件中的几个条件，并且希望根据这些条件中的每一个来渲染不同的元素。如果写了很多else if语句来返回略微不同的UI，就会写很多重复代码，这就留下了出错的空间。

可以使用&&逻辑运算符以更简洁的方式执行条件逻辑，这是完全可行的。

{condition && <p>markup</p>}

如果condition为true，则返回标记，如果为false，操作将在判断condition后立即返回false，并且不返回任何内容。

可以将这些语句直接包含在JSX中，并通过在每个条件后面写&&来将多个条件串在一起。

这将允许在render方法中处理更复杂的条件逻辑，而无需重复大量代码。

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {display: true}this.toggleDisplay = this.toggleDisplay.bind(this);}toggleDisplay() {this.setState({display: !this.state.display});}render() {return (<div><button onClick={this.toggleDisplay}>Toggle Display</button>{this.state.display && <h1>Displayed!</h1>}</div>);}
};

h1还是在display为true时被渲染，但使用&&逻辑运算符。

只要对h1使用&&就行了。
（{this.state.display && <h1>Displayed!</h1>}）
display为true时返回h1，为false时什么都不返回。

6.使用三元表达式进行条件渲染

还有一种方法可以渲染想要的东西，它使用内置的JavaScript条件：三元运算符。

它经常被用作JavaScript中if/else语句的缩写。它不像传统的if/else语句那样健壮，但是在React开发中很流行，原因之一是JSX的编译原理。

if/else语句不能直接插入到JSX代码中。
当需要它的时候，它总是在return语句外面。
如果想在JSX中实现条件逻辑，三元表达式是很好的选择。

const inputStyle = {width: 235,margin: 5
}class CheckUserAge extends React.Component {constructor(props) {super(props);this.state = {userAge: '',input: ''}this.submit = this.submit.bind(this);this.handleChange = this.handleChange.bind(this);}handleChange(e) {this.setState({input: e.target.value,userAge: ''});}submit() {this.setState({userAge: this.state.input});}render() {const buttonOne = <button onClick={this.submit}>Submit</button>;const buttonTwo = <button>You May Enter</button>;const buttonThree = <button>You Shall Not Pass</button>;return (<div><h3>Enter Your Age to Continue</h3><inputstyle={inputStyle}type="number"value={this.state.input}onChange={this.handleChange} /><br />{this.state.userAge === '' ? buttonOne : this.state.userAge < 18 ? buttonThree : buttonTwo}</div>);}
};

在CheckUserAge组件的render()方法中定义了三个常量，按钮1、2、3，每个都分配了一个表示按钮元素的简单JSX表达式。

首先用input和userAge初始化CheckUserAge的state，并设置值为空字符串。

一旦组件将信息渲染给页面，用户应该有一种方法与之交互。

在组件的return语句中，设置了三元表达式，逻辑为：当页面首次加载时，将提交按钮buttonOne渲染到页面。
（this.state.userAge === '' ? buttonOne）
输入为空当然就是页面首次加载。

然后当用户输入年龄并点击按钮时，根据年龄渲染不同的按钮，如果输入的数字小于18，则渲染buttonThree。
（this.state.userAge < 18 ? buttonThree）
如果用户输入的数字大于或等于18，则渲染buttonTwo。
（: buttonTwo）

7.根据Props有条件地进行渲染

现在已经使用了if/else、&&、null和三元运算符对渲染什么和何时渲染做出有条件的判断。

然而还有个问题，将这些概念中的任何一个或所有概念与另一个强大的React功能结合起来：props。

使用props有条件地渲染代码，在React开发中很常见，也就是说它们使用给定prop的值来自动决定渲染什么。

class Results extends React.Component {constructor(props) {super(props);}render() {return (<h1>{this.props.fiftyFifty ? "You Win!" : "You Lose!"}</h1>)};
};class GameOfChance extends React.Component {constructor(props) {super(props);this.state = {counter: 1}this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({counter: this.state.counter + 1});}render() {let expression = Math.random() >= 0.5 ? true : falsereturn (<div><button onClick={this.handleClick}>Play Again</button><Results fiftyFifty={expression}/><p>{'Turn: ' + this.state.counter}</p></div>);}
};

这有两个组件，一个名为GameOfChance的父组件和一个名为Results的子组件。
它们被用来创建一个简单的游戏，用户按下按钮来看它们是赢还是输。

首先需要一个表达式，每次运行时随机返回一个值，可以使用Math.random()。每次调用此方法，此方法会返回0（包括）和1（不包括）之间的值，因此对于50/50的几率，就在表达式中使用Math.random() > .5。这个表达式有50%的几率各返回true或false。
（let expression = Math.random() >= 0.5 ? true : false）

然后将Results组件渲染为GameOfChance的子组件，并将expression作为prop传递出去，名字为fiftyFifty。
（<Results fiftyFifty={expression} />）

在Results组件中，编写三元表达式基于从GameOfChance传来的proofiftyFifty来渲染文本。
（this.props.fiftyFifty ? "You Win!" : "You Lose!"）

最后确保handleClick()方法正确计算每个回合。

  handleClick() {this.setState({counter: this.state.counter + 1});}

8.根据组件状态有条件地更改内联CSS

关于条件渲染的应用程序和内联样式的使用。
这里还有个将这两个主题结合在一起的例子。
可以根据React组件的state有条件地渲染CSS。

class GateKeeper extends React.Component {constructor(props) {super(props);this.state = {input: ''};this.handleChange = this.handleChange.bind(this);}handleChange(event) {this.setState({ input: event.target.value })}render() {let inputStyle = {border: '1px solid black'};if (this.state.input.length > 15) {inputStyle.border = '3px solid red'}return (<div><h3>Don't Type Too Much:</h3><inputtype="text"style={inputStyle}value={this.state.input}onChange={this.handleChange} /></div>);}
};

这有一个简单的带有边框样式的受控input组件，如果用户在输入框里键入超过15个字符的文本，就将边框变成红色。

	if (this.state.input.length > 15) {inputStyle.border = '3px solid red'}

只要用简单的if语句就行了，如果this.state.input的length大于15，就将inputStyle的border设置为3px solid red。

⑨.使用Array.map()动态渲染元素

条件渲染很有用，但是可能需要组件来渲染未知数量的元素。通常在响应式编程中，程序员在应用程序运行前无法知道其state，因为这很大程度上取决于用户与程序的交互。

程序员需要提前编写代码来处理未知状态，在React中使用Array.map()来阐明这个概念。

const textAreaStyles = {width: 235,margin: 5
};class MyToDoList extends React.Component {constructor(props) {super(props);this.state = {userInput: '',toDoList: []}this.handleSubmit = this.handleSubmit.bind(this);this.handleChange = this.handleChange.bind(this);}handleSubmit() {const itemsArray = this.state.userInput.split(',');this.setState({toDoList: itemsArray});}handleChange(e) {this.setState({userInput: e.target.value});}render() {const items = this.state.toDoList.map(i => <li>{i}</li>)return (<div><textareaonChange={this.handleChange}value={this.state.userInput}style={textAreaStyles}placeholder="Separate Items With Commas" /><br /><button onClick={this.handleSubmit}>Create List</button><h1>My "To Do" List:</h1><ul>{items}</ul></div>);}
};

在constructor中，创建了this.state对象并定义两个state：userInput初始化为空字符串，toDoList初始化为空数组。

	this.state = {userInput: '',toDoList: []}

然后在items变量设置为，储存在组件内部state中的toDoList数组一一映射并相应的动态呈现li元素。

const items = this.state.toDoList.map(i => <li>{i}</li>)

还是代码像人话一点。

10.给同级元素一个唯一的键属性

上面那个例子，map方法根据用户输入动态渲染多个元素，但是缺少一个重要的部分。
创建元素数组时，每个元素都需要一个设置为唯一值的key属性。

React使用这些键来跟踪哪些项目被添加、更改或删除。
这有助于在以任何方式修改列表时提高重新渲染过程的效率。
键只需要在同级元素之间是唯一的，不需要在应用程序中是全局唯一的。

const frontEndFrameworks = ['React','Angular','Ember','Knockout','Backbone','Vue'
];function Frameworks() {const renderFrameworks = frontEndFrameworks.map((item) => <li key={item}>{item}</li>)return (<div><h1>Popular Front End JavaScript Frameworks</h1><ul>{renderFrameworks}</ul></div>);
};

这有一个数组，它包含一些前端框架和一个名为Frameworks()的无状态函数组件。

Frameworks()需要将数组映射到无序列表。
使用map回调，为frontEndFrameworks数组中的每个框架返回一个li元素，并给每个li的key属性设置一个唯一的值。

const renderFrameworks = frontEndFrameworks.map((item) => <li key={item}>{item}</li>)

只能说懂的都懂。

11.使用Array.Filter()动态过滤数组

map是个很强大的工具，在使用React时经常使用。
与map相关的另一个方法是filter，它根据条件过滤数组的内容，然后返回一个新数组。

例如有一个users数组，每个数组元素都有一个可以设置为true或false的online属性，可以只过滤那些在线的用户：

let onlineUsers = users.filter(user => user.online);

一个例子：

class MyComponent extends React.Component {constructor(props) {super(props);this.state = {users: [{username: 'Jeff',online: true},{username: 'Alan',online: false},{username: 'Mary',online: true},{username: 'Jim',online: false},{username: 'Sara',online: true},{username: 'Laura',online: true}]}}render() {const usersOnline = this.state.users.filter(user => user.online === true);const renderOnline = usersOnline.map(user => <li key={user.username}>{user.username}</li>)return (<div><h1>Current Online Users:</h1><ul>{renderOnline}</ul></div>);}
};

MyComponent的state由一个users数组初始化，有些用户在线，有些不在线。

首先用filter返回一个新数组，只包含online属性为true的用户。
（const usersOnline = this.state.users.filter(user => user.online === true);）

然后在renderOnline变量中，映射经过过滤的数组，并未每个用户返回一个包含它们username文本的li元素。还有独特的key。
（const renderOnline = usersOnline.map(user => <li key={user.username}>{user.username}</li>)）

12.用renderToString在服务器上渲染React

目前为止，都是在客户端上渲染React组件，一般来说都是这么做的。

然而在一些用例中，在服务器上渲染一个React组件也有意义。
由于React是一个JavaScript视图库，所以使用Node让JavaScript运行在服务器上是可行的。

实际上，React还提供了一个用于此项目的renderToString()方法。

有两个原因可以解释为什么服务器上的渲染可能会在应用程序中使用。
首先，如果不这么做，React应用程序将包含一个代码量很少的HTML文件和一大堆JavaScript，当它最初加载到浏览器时，这对搜索引擎不太友好，因为它们视图为网页内容生成索引，以便被人们找到。

如果在服务器上渲染初始HTML标记并发送到客户端，则初始页面加载的内容包含搜索引擎可以抓取的所有页面标记。

其次这创造了更快的初始页面加载体验，因为渲染HTML代码量要比整个应用程序的JavaScript代码小。
React仍然可以识别应用并在初始加载后进行管理。

class App extends React.Component {constructor(props) {super(props);}render() {return <div/>}
};
ReactDOMServer.renderToString(<App />);

renderToString()方法由ReactDOMserver提供，这里由不知名的力量定义。
这个方法接受一个React元素作为参数，这里它把App渲染成了字符串。

---

总结

真是一场噩梦