条件渲染
{ condition ? '❤️取消' : '?收藏' } { condition && '取消'||'收藏' }列表渲染
// 数据 const people = [{ id: 1, name: 'Leo', age: 35 }, { id: 2, name: 'XiaoMing', age: 16 }] // 渲染列表 { people.map(person => { return ( <dl key={person.id}> <dt>{person.name}</dt> <dd>age: {person.age}</dd> </dl> ) }) }React的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是React并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是key，这个 key 必须是每个元素唯一的标识
dangerouslySetHTML对于富文本创建的内容，后台拿到的数据是这样的：
content = "<p>React.js是一个构建UI的库</p>"处于安全的原因，React当中所有表达式的内容会被转义，如果直接输入，标签会被当成文本。这时候就需要使用dangerouslySetHTML属性，它允许我们动态设置innerHTML
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { constructor() { super() this.state = { content : "<p>React.js是一个构建UI的库</p>" } } render () { return ( <div // 注意这里是两个下下划线 __html dangerouslySetInnerHTML={{__html: this.state.content}} /> ) } } ReactDOM.render( <App/>, document.getElementById('root') )