前言
以下是 React 学习的一些笔记，基本来源于 React 中文文档 ，刚开始学习 React，都比较基础，不喜勿碰！
JSX
-
JSX 中插入 name 的变量，将变量包裹在大括号中，也可以在大括号中使用任何有效的 JavaScript 表达式
-
JSX 也是一个表达式，在编译之后，JSX 表达式会被转换成 js 函数调用，并且对其取值后得到的 JavaScript 对象 这就意味着我可以在 if 语句和 for 循环语句中使用 JSX，将 JSX 赋值给一个变量，将 JSX 作为参数，以及函数返回等等
-
JSX 指定属性的时候，不要在 JavaScript 表达式的大括号外面再加上引号。引号（对于字符串）或者大括号（对于表达式）应该取其中的一个，对同一个属性不能同时使用两个
const element = <img src="{user.avatarUrl}"></img>; // 错误
const element = <img src={user.avatarUrl}></img>; // 正确
- 因为 JSX 的语法更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不是使用 HTML 属性名称的命名约定 所以 JSX 中的 class 变成了 className
元素渲染
-
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。通过 React DOM 保持 DOM 和 React 元素一致 （这是怎么做到的呢？）
-
想要将一个 React 元素渲染到根 DOM 节点中，只需要将它们一起传入 ReactDOM.render()
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
-
React 元素是不可变元素，一旦被创建，就无法更改它的子元素或者属性。更新 UI 唯一的方式就是创建一个全新的元素，并将其传入 ReactDOM.render()。（这不是很耗性能？）
-
但是 React DOM 会将元素和它的子元素与它之前的状态进行比较，并只会进行必要的更新来将 DOM 达到预期的结果。（这就解释了上面的耗性能的问题，这里的原理类似于 Vue 的 虚拟 DOM 的更新策略？）
组件 & Props
- 组件的概念，类似于 JavaScript 函数。接受任意的入参（props），并返回用于描述页面展示内容的 React 元素。看以下两个例子，它们在 React 中是等效的
// 函数方式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// ES6 的 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- 当 React 元素为用户自定义组件的时候，会将 JSX 中所接收的属性转换成单个对象传递给组件，这个对象被称之为 props
// 自定义组件，注意这里的 props，就是传入的属性对象集合
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
-
提取组件可能是一件繁重的工作，但是在大型应用中，构建可复用的组件库是完全值得的
-
所有的 React 组件都必须像纯函数一样保护它们的 props 不被更改
-
在具有许多组件的应用程序中，当组件被销毁时候释放所占用的资源是非常重要的。
-
componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
-
React 可以知道 state 已经改变了，然后重新调用 setState() 方法进行一次 render() 方法更新页面
-
解决 state 是异步更新的问题，让setState() 接收一个函数而不是一个对象，这个函数将上一个 state 作为第一个参数，将此次的更新被应用时的 props 作为第二个参数
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件处理
-
React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同。
- React 事件命名采用小驼峰
- 使用 JSX 语法传入一个函数作为事件处理器，而不是一个字符串
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
- 向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
条件渲染
-
条件渲染和 JavaScript 中的一样，使用 if 或者 条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI
-
通过元素变量来储存元素，可以进一步有条件的渲染组件的一部分，而其他部分渲染并不会因此改变
-
在极少数情况下，可能需要隐藏组件，要完成这个操作，可以让 render 方法直接返回 null，而不进行任何渲染
列表 & key
-
渲染多个组件：通过使用 {} 在 JSX 内构建一个元素集合
-
关于 key 值的设置 当列表项目的顺序可能会变化的时候，我们不建议使用索引当做 key 值，这样会导致性能变差，还可能会引起组件状态的问题
状态提升
- 在 React 应用中，任何可变数据应当只有一个对应的唯一“数据源”。如果有多个组件依赖于同一个 state，那么我们应该将它提升到这些组件的最近共同父组件中。这样依赖于自上而下的数据流，而不是尝试在不同的组件之间同步 state
欢迎大家来我杂货铺逛逛，不买账都行，我们就聊聊天，谈谈心~
