JSX简介
JSX 防止注入攻击
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
1 | const element = ( |
1 | const element = React.createElement( |
React.createElement()会预先执行一些检查,以帮助你编写无错代码,但实际上它创建了一个这样的对象:1
2
3
4
5
6
7
8// 注意:这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
元素渲染
元素是构成 React 应用的最小砖块。
元素描述了你在屏幕上想看到的内容。
1 | const element = <h1>Hello, world</h1>; |
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
假设你的 HTML 文件某处有一个<div>
1
<div id="root"></div>
我们将其称为“根” DOM 节点,因为该节点内的所有内容都将由 React DOM 管理。
想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render():1
2const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。
根据我们已有的知识,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 ReactDOM.render()。
在实践中,大多数 React 应用只会调用一次 ReactDOM.render()。在下一个章节,我们将学习如何将这些代码封装到有状态组件中。
React 只更新它需要更新的部分
React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
组件
Props 的只读性
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
State & 生命周期
出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。
例如,此代码可能会无法更新计数器:1
2
3
4// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
要解决这个问题,可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:1
2
3
4// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
上面使用了箭头函数,不过使用普通的函数也同样可以:1
2
3
4
5
6// Correct
this.setState(function(state, props) {
return {
counter: state.counter + props.increment
};
});
State 的更新会被合并
当你调用 setState() 的时候,React 会把你提供的对象合并到当前的 state。
例如,你的 state 包含几个独立的变量:
这里的合并是浅合并,所以 this.setState({comments}) 完整保留了 this.state.posts, 但是完全替换了 this.state.comments。1
2
3
4
5
6
7
8
9
10
11constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
this.setState({
comments: response.comments
});
事件处理
条件渲染
状态提升
组合 vs 继承
React哲学
通过问自己以下三个问题,你可以逐个检查相应数据是否属于 state:
该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
你能否根据其他 state 或 props 计算出该数据的值?如果是,那它也不是 state。
无障碍辅助功能
代码分割
import
React.lazy
context