React---day5
4、React的组件化
组件的分类：
- 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
- 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
- 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；
函数组件、无状态组件、展示型组件主要关注UI的展示；
类组件、有状态组件、容器型组件主要关注数据逻辑；
类组件：
import React from "react";
export class App extends React.Component{constructor(){super();this.state = {counter : 0}}render(){return (<div><h2>当前计数为{this.state.counter}</h2></div>)}
}
函数组件：
export function Func (){return (<div><span>我是function的组件：App组件</span></div>)
}
类组件：
- 组件的名称是大写字符开头（无论类组件还是函数组件）
- 类组件需要继承自 React.Component
- 类组件必须实现render函数
函数组件：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
- 没有this(组件实例）；
- 没有内部状态（state）；
- 我们来定义一个函数组件：
render函数的返回
-
React 元素：
通常通过 JSX 创建。例如，
会被 React 渲染为 DOM 节点， 会被 React 渲染为自定义组件；无论是还是 均为 React 元素。 -
数组或 fragments：使得 render 方法可以返回多个元素。
-
Portals：可以渲染子节点到不同的 DOM 子树中。
-
字符串或数值类型：它们在 DOM 中会被渲染为文本节点
-
布尔类型或 null：什么都不渲染。
5、React的生命周期
什么是生命周期：
- 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
- 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；
- 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
生命周期函数：
- 比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
- 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
- 比如实现componentWillUnmount函数：组件即将被移除时，就会回调；
详解生命周期函数：
Constructor
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
constructor中通常只做两件事情：
- 通过给 this.state 赋值对象来初始化内部的state；
- 为事件绑定实例（this）；
componentDidMount
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？
-
- 依赖于DOM的操作可以在这里进行；
- 在此处发送网络请求就最好的地方；（官方建议）
- 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；
componentDidUpdate
- componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
- 当组件更新后，可以在此处对 DOM 进行操作；
- 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。
componentWillUnmount
- componentWillUnmount() 会在组件卸载及销毁之前直接调用。
- 在此方法中执行必要的清理操作；例如，清除 timer，取消网络请求或清除，在 componentDidMount() 中创建的订阅等；
、不常用的生命周期函数
getDerivedStateFromProps
getDerivedStateFromProps 是 React 16.3 引入的一个静态生命周期方法，用于在组件接收到新的 props 时同步更新 state。
- 作用：确保
state与props保持同步，特别是当state的值完全依赖于props时。 - 调用时机：在组件初始化、接收到新的
props或父组件强制更新时被调用。 - 返回值：返回一个对象，表示需要更新的
state，如果不需要更新则返回null。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate 是在 React 更新 DOM 之前调用的一次性生命周期函数，用于获取 DOM 更新前的一些信息（如滚动位置）。
- 作用：在组件更新之前捕获 DOM 的某些状态，以便在更新后使用这些信息。
- 调用时机：在
render方法之后、DOM 更新之前调用。 - 返回值：返回值将作为
componentDidUpdate的第三个参数传递。
shouldComponentUpdate
shouldComponentUpdate 是一个性能优化的生命周期函数，用于决定组件是否需要重新渲染。
- 作用：通过返回
true或false控制组件的更新，从而避免不必要的渲染。 - 调用时机：在组件接收到新的
props或state时，但在render之前调用。
6、组件之间进行数据传递
父传子：
父组件：
<div><ChildCpn name="蒋乙菥" age="18" height="1,88" />
</div>
子组件：
export class ChildCpn extends React.Component{render(){const {name , age , height} = this.propsreturn (<div><h2>{"姓名" + name + "," + "年龄" + age + "身高" + height}</h2></div>)}}
制更新时被调用。
- 返回值：返回一个对象，表示需要更新的
state，如果不需要更新则返回null。
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate 是在 React 更新 DOM 之前调用的一次性生命周期函数，用于获取 DOM 更新前的一些信息（如滚动位置）。
- 作用：在组件更新之前捕获 DOM 的某些状态，以便在更新后使用这些信息。
- 调用时机：在
render方法之后、DOM 更新之前调用。 - 返回值：返回值将作为
componentDidUpdate的第三个参数传递。
shouldComponentUpdate
shouldComponentUpdate 是一个性能优化的生命周期函数，用于决定组件是否需要重新渲染。
- 作用：通过返回
true或false控制组件的更新，从而避免不必要的渲染。 - 调用时机：在组件接收到新的
props或state时，但在render之前调用。