在React里，我们可以创建不同的组件来封装我们需要的功能。我们也可以根据组件的状态，只渲染组件中的一部分内容，而条件渲染就是为此而准备的。在React中，我们可以像在JavaScript中写条件语句一样地写条件渲染语句，如：
function Greet(props) { const isLogined = props.isLogined; if (isLogined) { return <div>Hello !</div>; } return <div>Please sign in</div>; } ReactDOM.render( <Greet isLogined={true} />, document.getElementById('root') );
这将渲染出：
<div>Hello !</div>
1、使用变量来存储元素
我们也可以使用变量来存储元素，如：
function LogBtn(props) { var button; const isLogined = props.isLogined; if (isLogined) { button = <button>退出</button> } else { button = <button>登陆</button> } return <div>You can {button}</div>; } ReactDOM.render( <LogBtn isLogined={false} />, document.getElementById('root') );
2、使用&&运算符进行渲染
由于JavaScript语法对待&&运算符的性质，我们也可以使用&&运算符来完成条件渲染，如：
function LogBtn(props) { var button; const isLogined = props.isLogined; return ( <div>Hello {!isLogined && ( <button>请登陆</button> )} </div> ) }
当props.isLogined为false的时候，就会渲染出：
<div>Hello <button>请登录</button></div>
3、使用三目运算符进行渲染
我们可能已经发现了，其实JSX可以像一个表达式那样子灵活使用，所以，我们自然也可以使用三目运算符进行渲染，如：
function LogBtn (props) { const isLogined = props.isLogined; return ( <div>You can <button>{isLogined ? '退出' : '登陆'}</button> </div> ) }
4、阻止整个组件的渲染
有时候，我们希望是整个组件都不渲染，而不仅仅是局部不渲染，那么这种情况下，我们就可以在render()函数里返回一个null，来实现我们想要的效果，如：
function LogBtn (props) { const isLogined = props.isLogined; const isShow = props.isShow; if (isShow) { return ( <div>You can <button>{isLogined ? '退出' : '登陆'}</button> </div> ) } return null; }
注意： 组件里返回null不会影响组件生命周期的触发，如componentWillUpdate和componentDidUpdate仍然会被调用
在JavaScript中，我们可以使用map()函数来对一个数组列表进行操作，如：
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(number => number*2); console.log(doubled); // 得到[2, 4, 6, 8, 10]
同样的，在React里，我们也可以使用map()来进行列表渲染，如：
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map(number => { return ( <li>{number}</li> ) }); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') )
这将得到：
<ul><li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
当然，我们还可以进行更好的封装，如：
function NumberList (props) { const numbers = props.numbers; const listItems = numbers.map(number => { return ( <li>{number}</li> ) }); return <ul>{listItems}</ul> }
当我们运行以上的代码的时候，会发现控制台提示：Each child in an array or iterator should have a unique "key" prop，因此，我们需要为列表项的每一个项分配一个key，来解决这个问题，通常而言，我们可以使用以下几种方式来提供key：
使用数据项自身的ID，如<li key={item.itemId}>
使用索引下标（index），如：
const listItems = numbers.map((number, index) => { <li key={index}>{number}</li> });
但是React不推荐在需要重新排序的列表里使用索引下标，因为会导致变得很慢。
注意： 只有在一个项的同胞里区分彼此的时候，才需要使用到key，key不需要全局唯一，只需要在一个数组内部区分彼此时唯一便可。key的作用是给React一个提示，而不会传递给组件。如果我们在组件内需要同样的一个值，可以换个名字传递，如：
const content = posts.map(post => ( <Post key={post.id} id={post.id} title={post.title} /> ));
12、表单表单和其他的React中的DOM元素有所不同，因为表单元素生来就是为了保存一些内部状态。在React中，表单和HTML中的表单略有不同
1、受控组件