自己都觉得没写好,后期得重新改
什么是 React
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
看完这种描述你还是会很懵,简而言之,使用 React 相当于需要学会一套新的书写 Html 方式,这是最简单的一个 React Holle World!
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
含义为:将一个内容为 <h1>Hello, world!</h1>
的组件放置在 id 为 root
的标签元素中
官方文档:官方文档传送门
React 环境搭建
暂略
React 生命周期
import React from 'react';
class Template extends React.Component {
constructor(props) {
super(props);
this.state = {};
console.log("constructor----------");
}
componentWillMount() {
console.log("componentWillMount----------");
}
componentWillReceiveProps(nextProps, nextContext) {
console.log("componentWillReceiveProps----------");
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log("shouldComponentUpdate----------");
return true;
}
render() {
return (
<div>Hello, world!</div>
);
}
componentDidMount() {
console.log("componentDidMount----------");
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate----------");
}
componentWillUnmount() {
console.log("componentWillUnmount----------");
}
}
export default Template;
这是一个基于 ES 6 语法的 react 组件声明, render()
的返回值则是该组件应包含的 html 内容
生命周期 | 含义 |
---|---|
constructor | 组件的构造函数,可以赋 state 、props 初值 |
componentWillMount | 初始化时被调用一次 |
componentWillReceiveProps | 父组件传递的给当前组件的 props 发生变动 |
shouldComponentUpdate | 准备开始渲染,该函数返回 true 才会真正开始渲染,人为返回false 是优化性能的关键 |
render | 构建 dom 元素 |
componentDidMount | 虚拟 dom、实际 dom 渲染已完成,初次渲染完毕时被调用,jquery 等基于实际 dom 代码在此阶段可以被响应 |
componentDidUpdate | 虚拟 dom、实际 dom 渲染已完成,除初次渲染完毕之外时被调用,jquery 等基于实际 dom 代码在此阶段可以被响应 |
componentWillUnmount | 当前组件即将被销毁前被调用,通常在此处书写解除监听事件等清理工作 |
React 的重要事项
也许你听过 React 性能多高,dom 节点差异比较算法多厉害……,但你得明白 dom 或者 state 发生变化时 React 的行为。
假设 A、B、C 均为 react 组件,假设发生三次渲染,渲染内容分别为
// 第一次 render
<div>
<A>
<B></B>
<A/>
</div>
// 第二次 render
<div>
<A><A/>
<B></B>
</div>
// 第三次 render
<div>
<A><A/>
<C><C/>
</div>
从第一次到第二次渲染,会触发 A 组件和 B 组件的 componentWillUnmount
,随后是 A、B组件的 constructor
以及后续完成渲染
从第二次到第三次渲染,看起来 A 的位置未发生变动,但事实上仍会触发 A 组件和 B 组件的 componentWillUnmount
,随后是 A、C组件的 constructor
以及后续生命周期以完成渲染
很明显这里没有复用组件,进行了多余的删除与创建过程。想要进行优化,就得提到key
了,这个可以为组件作唯一标识,可以告诉 react 下一次渲染时组件是否是原来的那一个。
// 第四次 render
<div>
<A key={"独一无二"}><A/>
<B></B>
</div>
// 第五次 render
<div>
<A key={"独一无二"}><A/>
<C><C/>
</div>
从第四次到第五次渲染,会触发 B 组件的 componentWillUnmount
,随后是 C组件的 constructor
以及后续生命周期以完成渲染,以及 A 组件的 shouldComponentUpdate
具体情况可自行根据上面的 Template
内容实验,如果你想稍微偷点懒,渲染生命周期触发的实验 Demo GitHub 地址
PS:如果是父组件内部嵌套多个子组件,父组件 state 发生任何变动,会触发所有子组件的 shouldComponentUpdate
,如果该函数返回了 true,对应的组件就会执行重新渲染。