常用语法模板

1.处理事件
React 事件使用驼峰命名，而不是全部小写。
通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串。

<button onClick={activateLasers}>
  Activate Lasers
</button>

在 React 中你不能通过返回 false来阻止默认行为。必须明确调用 preventDefault。
在JSX回调中你必须注意 this 的指向。 在 JavaScript 中，类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick，那么在直接调用该函数时，this 会是 undefined 。

<button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
</button>

这不是 React 特有的行为；这是 JavaScript 中的函数如何工作的一部分。 一般情况下，如果你引用一个后面没跟 () 的方法，例如 onClick={this.handleClick} ，那你就应该 绑定(bind) 该方法。

// 这个绑定是必要的，使`this`在回调中起作用
    this.handleClick = this.handleClick.bind(this);

如果调用 bind 令你烦恼，有两种方法可以解决这个问题。 如果您使用实验性的 属性初始化语法 ，那么你可以使用属性初始值设置来正确地 绑定(bind) 回调：

 handleClick = () => {
    console.log('this is:', this);
  }

如果你没有使用属性初始化语法，可以在回调中使用一个 箭头函数：

<button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>

2.条件渲染
React 中的条件渲染就和在 JavaScript 中的条件语句一样。使用 JavaScript 操作符如 if 或者条件操作符来创建渲染当前状态的元素，并且让 React 更新匹配的 UI 。
虽然声明一个变量并使用一个 if 语句是一个有条件地渲染组件的好方法，有时你可能想要使用一个更简短的语法。在 JSX 中有几种内联条件的方法。
使用逻辑 && 操作符的内联 if 用法
您可以 在JSX中嵌入任何表达式 ，方法是将其包裹在花括号中。这也包括 JavaScript 逻辑 && 运算符。 它有助于有条件地包含一个元素：

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

使用条件操作符的内联 If-Else
另一个用于条件渲染元素的内联方法是使用 JavaScript 的条件操作符 condition ? true : false 。

防止组件渲染
在极少数情况下，您可能希望组件隐藏自身，即使它是由另一个组件渲染的。为此，返回 null 而不是其渲染输出。

3.列表(Lists) 和 键(Keys)
多组件渲染
可以创建元素集合，并用一对大括号 {} 在 JSX 中直接将其引用即可。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

基本列表组件
我们在 numbers.map() 中赋值一个 key 给我们的列表元素，解决丢失 key 的问题。

const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

键(Keys)
键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识：
挑选 key 最好的方式是使用一个在它的同辈元素中不重复的标识字符串。多数情况你可以使用数据中的 IDs 作为 keys：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

当要渲染的列表项中没有稳定的 IDs 时，你可以使用数据项的索引值作为 key 的最后选择：

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

使用 keys 提取组件
例如，如果你提取 一个 ListItem 组件，应该把 key 放置在数组处理的 <ListItem /> 元素中，不能放在 ListItem 组件自身中的 <li> 根元素上。

keys 在同辈元素中必须是唯一的
在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。我们可以在操作两个不同数组的时候使用相同的 keys ：

在 JSX 中嵌入 map()
JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果：

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}