这是我参与更文挑战的第15天，活动详情查看：更文挑战
为什么不可变性在React中非常重要？
- 不可变性指的是不直接修改数据，而是使用新的数据替换旧的数据。
- 不可变性带来的优势：
- 撤销和回退操作在开发中是很常见的，不直接在数据上进行修改，可以帮助我们更好的回溯数据。
- 更容易跟踪数据的改变。
- 方便确定React重新渲染的时机。
通过slice函数返回数组的副本
- 这个方法是我们必须掌握的。
const arr = [1,2,3,4]; arr.slice() // [1,2,3,4] console.log(arr === arr.slice()); //false 复制代码
JSX简介
const element = <h1>Hello, world!</h1>; 复制代码
解读
- JSX是JavaScript的语法拓展。
- JSX可以生成React元素。
为什么使用JSX？
官方描述：React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。
解读
- 我们首先要搞懂一个概念耦合是什么？答：耦合表示两个子系统（或类）之间的关联程度。也就是React认为渲染的逻辑和其他UI逻辑的广联程度比较大，在JS中将JSX和UI放在一起会帮助我们显示更多的错误和警告。
JSX也是一个表达式
- 可以在if或for语句中使用JSX，并将JSX进行返回，赋值给变量，将JSX当做参数进行出传递，都是可以的。
- 编译后，JSX表达式会被转换为普通的JavaScript函数调用。
JSX特定属性
- 属性值为字面量的情况可以通过引号的形式进行引入。
const element = <div tabIndex="0"></div>; 复制代码
- 属性值为JS表达式的时候，需要通过大括号来进行引入。
const element = <img src={user.avatarUrl}></img>; 复制代码
注意事项：
JSX中使用小驼峰命名来对属性进行命名，例如：JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
使用JSX指定子元素
- 单标签的形式
const element = <img src={user.avatarUrl} />; 复制代码
- JSX标签中包含很多元素的情形。
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> ); 复制代码
JSX防止注入攻击
官方描述：React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
解读React底层已经帮我们做好了，我们可以直接用了。
JSX表示对象
- Babel不仅有将ES6转为ES5的功能，同时还可以将JSX语法转译为React.createElement()这个函数调用。下面两种代码是等效的。
const element = ( <h1 className="greeting"> Hello, world! </h1> ); 复制代码
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 复制代码
- React.createElement()实际上创建了这样一个对象。
const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; 复制代码
解读通俗的说，Babel会将JSX语法转换为JS对象的形式，React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。
