类-函数组件-生命周期-组件拆分-嵌套-通讯
组件化开发
概念
- 将页面的复杂逻辑拆分成一个个小功能块，每个组件负责实现页面的一个功能块。
- 组件化提供了一种抽象，让我们可以开发出一个个
独立可复用的小组件来构造我们的应用。
分类
- 根据组件的定义方式，可以分为：函数组件和类组件
- 根据组件内部是否有状态需要维护，可以分成：无状态组件和有状态组件
- 根据组件的不同职责，可以分成：展示型组件和容器型组件
创建 React 组件
类组件
- 组件的名称是
大写字符开头（无论类组件还是函数组件）- 类组件需要继承自
React.Component- 类组件必须实现一个
render函数
class App extends React.Component {
// 构造函数
constructor() {
super();
this.state = {
count: 0,
};
};
render() {
const {count} = this.state
return (
<div>{count}</div>
);
}
}
函数组件
在没有使用 Hooks 的情况下，函数组件的特点如下：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
- this关键字不能指向组件实例（因为没有组件实例）；
- 没有内部状态（state）；
export default function App() {
// 对应类组件 render 函数返回的内容
return (
<div>123</div>
)
}
函数组件最初是只负责展示数据，没有内部状态。但后面提出 Hooks 之后，对函数组件做了很多增强。
生命周期
组件从创建到销毁的整个过程，被称之为生命周期
挂载的过程
- 创建实例，执行
constructor构造方法- 执行
render方法- 组件被渲染（挂载）到 DOM，执行
componentDidMount方法
更新的过程
- 执行
render方法- 组件的 DOM 更新完成，执行 componentDidUpdate 方法
卸载的过程
- 执行 componentWillUnmount 方法
- 组件从 DOM 中卸载掉：从 DOM 中移除
常用生命周期函数
React 还提供了一些生命周期的钩子函数，待生命周期的阶段完成后，就会触发这些钩子函数的回调。
componentDidMount
- componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？
- 依赖于DOM的操作可以在这里进行；
- 在此处发送网络请求就最好的地方；（官方建议）
- 可以在此处添加一些订阅（要在
componentWillUnmount取消订阅）；
componentDidUpdate
componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
- 当组件更新后，可以在此处对 DOM 进行操作；
- 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。
componentWillUnmount
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
- 在此方法中执行必要的清理操作；
- 例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；
组件嵌套
将组件进行拆分，拆分成一个个小的组件；再将这些组件组合嵌套在一起，最终形成我们的应用程序；
如何快速创建组件
在 VSCode 里面安装一个插件 ES7+ React/Redux/React-Native snippets，里面提供了很多代码片段
