React学习

1. 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。
   例如，class 变成了 className，而 tabindex 则对应着 tabIndex。

2. React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

3. 元素是构成 React 应用的最小单位。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

4. 组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

5. 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

6. 组件名称必须以大写字母开头。
   例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。

7. 组件的返回值只能有一个根元素。

8. 无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。
   所有的React组件必须像纯函数（它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。）那样使用它们的props。

9. 状态与属性十分相似，但是状态是私有的，完全受控于当前组件。

10. 关于 setState() 这里有三件事情需要知道:

• 不要直接更新状态
• 状态更新可能是异步的
• 状态更新合并

11. React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

• React事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)

12. 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。

13. 你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。

14. React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

15. 你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。

16. 你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。

17. 条件渲染的另一种方法是使用 JavaScript 的条件运算符 condition ? true : false。

18. 在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

19. 组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。

20. Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

21. 一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key，当元素没有确定的id时，你可以使用他的序列号索引index作为key。

22. 如果列表项目的顺序可能会变化，我们不建议使用索引来用作键值，因为这样做会导致性能的负面影响，还可能引起组件状态问题。如果你想要了解更多，请点击深度解析key的必要性。如果你选择不指定显式的键值，那么React将默认使用索引用作为列表项目的键值。

23. 数组元素中使用的key在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键。

24. key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请用其他属性名显式传递这个值。

25. 我们通过使react变成一种单一数据源的状态来结合二者。React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。

26. 在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。然后，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的共同祖先中。你应该依赖 自上而下的数据流，而不是尝试在不同组件中同步状态。

27. React 中的数据流是单向的，并在组件层次结构中向下传递。

28. 用户定义组件必须首字母大写

29. 在既包含开始标签又包含结束标签的 JSX 表达式中，这两个标签之间的内容被传递为专门的属性：props.children。有几种不同的方法来传递子代：

• 字符串字面量

<MyComponent>Hello world!</MyComponent>

• JSX子代

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

• JavaScript 表达式作为子代

<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>

• 函数作为子代

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

• 布尔值、Null 和 Undefined 被忽略

false、null、undefined 和 true 都是有效的子代，只是它们不会被渲染。下面的JSX表达式将渲染为相同的东西：

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

30. 一个告诫是JavaScript中的一些“falsy”值（比如数字0），它们依然会被React渲染。例如，下面的代码不会像你预期的那样运行，因为当props.message为空数组时，它会打印0：

<div>
  {props.messages.length && <MessageList messages={props.messages} />}
</div>

要解决这个问题，确保请&&前面的表达式始终为布尔值：

<div>
  {props.messages.length > 0 && <MessageList messages={props.messages} />}
</div>

相反，如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :

<div>
  My JavaScript variable is {String(myVariable)}.
</div>