REACT(二)

核心内容

组件& Props

概念:React 应用是由被称为组件的独立 UI 片段构建而成。React 组件本质上是可以任意添加标签的 JavaScript 函数。组件可以小到一个按钮，也可以大到是整个页面。

// Profile.js

export default function Profile() {

return ;

}

// Gallery.js

import Profile from "./Profile.js";

export default function Gallery() {

return (

);

}

纯函数组件

纯函数

概念：即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。必要条件：

纯函数接受参数，基于参数计算，返回一个新对象；不会产生副作用，计算过程不会修改输入的参数并且不修改其作用域之外的参数或方法；相同的输入保证相同的输出 优点：

相同的输入必定是相同的输出，所以纯函数可以根据输入来做缓存,此外这一特性保证了引用的透明性；纯函数完全自给自足，这点的好处就是纯函数的依赖很明确，因此更易于观察和理解，而且让我们的测试更加容易；可靠：不用担心有副作用，可以更好的工作；代码并行：可以并行运行任意纯函数，因为纯函数不需要访问共享的内存，而且也不会因为副作用而进入竞争态。 例子： let friend = {

firstName: "zhang",

lastName: "san",

age: 18,

};

// 非纯函数：会修改函数外变量 friend 的值

function appendMessage() {

friend.message = {

time: "2021年",

info: "学习React",

};

}

// 纯函数：返回一个新对象，且不会修改参数

function appendMessage(friend) {

let copyFriend = Object.assign({}, friend);

copyFriend.message = {

time: "2021年",

info: "学习React",

};

return copyFriend;

}

概念：如果一个组件没有状态（state），那么组件的输出方式，将完全取决于两个参数：props 和 context，只要有相同的 props 和 context ，那么他们的输出绝对是相同的。将组件比喻成函数的话，相同的输入(props 和 context) 永远都会有相同的输出。特点:

组件不会被实例化，整体渲染性能得到提升；组件不能访问 this 对象；组件无法访问生命周期的方法；无状态组件只能访问输入的 props，无副作用。 优点：

无副作用；占内存更小，首次 render 的性能更好；语法更简洁，可读性好，逻辑简单，测试简单，代码量少，容易复用；更佳的性能表现：因为函数组件中不需要进行生命周期的管理和状态管理，因此 React 并不需要进行某些特定的检查和内存分配，保证了性能。 缺点：

无生命周期；没有 this。 例子: // es6 类组件

class Title extends React.Component {

render() {

return

{this.props.title}

}

}

state

概念:state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)注意事项

组件中render方法中的this为组件实例对象；组件自定义的方法中this为undefined，如何解决？

强制绑定this: 通过函数对象的bind()；箭头函数； 切勿直接修改state数据，直接state会重新渲染内容；使用setState通过this.setState修改完数据后，并不会立即修改DOM里面的内容，react会在这个函数内部的所有设置状态改变后，统一对比虚拟 DOM 对象，然后在统一修改，提升性能。 props

理解

每个组件对象都会有 props(properties 的简写)属性；组件标签的所有属性都保存在 props 中； 作用

通过标签属性从组件外向组件内传递变化的数据；组件内部不要修改props数据，props永远是只读的。 refs与事件处理

理解

组件内的标签可以定义ref属性来标识自己 三种组件标签获取方式：

1、字符串形式的ref2、回调形式的ref3、createRef创建ref容器

注意： 组件名称必须以大写字母开头。 React 会将以小写字母开头的组件视为原生 DOM 标签。例如，

代表 HTML 的 div 标签，而 则代表一个组件，并且需在作用域内使用 Welcome。

生命周期

1、初始化阶段: 由ReactDOM.render触发，该阶段的函数只执行一次。

constructor:构造函数，最先被执行，我们通常在构造函数里初始化 state 对象或者给自定义方法绑定 this。

获取props和初始化state通过 constructor的参数props获取设置state和props getDerivedStateFromProps:static getDerivedStateFromProps(nextProps, prevState)，接收父组件传递过来的 props 和组件之前的状态，返回一个对象来更新 state 或者返回 null 来表示接收到的 props 没有变化，不需要更新 state 。

作用： 将父组件传递过来的 props 映射到子组件的 state 上面，这样组件内部就不用再通过 this.props.xxx 获取属性值了，统一通过 this.state.xxx 获取。映射就相当于拷贝了一份父组件传过来的 props ，作为子组件自己的状态。注意：子组件通过 setState 更新自身状态时，不会改变父组件的 props；配合componentDidUpdate，可以覆盖 componentWillReceiveProps 的所有用法；注意：

getDerivedStateFromProps前面要加上static保留字，声明为静态方法，不然会被react忽略掉；getDerivedStateFromProps里面的 this 为 undefined。 render:render函数是纯函数，只返回需要渲染的东西，不应该包含其他的业务逻辑，可以返回原生的DOM、React 组件、Fragment、Portals、字符串和数字、Boolean 和 null 等内容。

作用：渲染组件到页面中，无法获取页面中的DOM对象注意：不要在render方法中调用 setState() 方法，否则会递归渲染

原因说明：状态改变会重新调用render()，render()又重新改变状态 componentDidMount:组件状态之后调用，此时我们可以获取到 DOM 节点并操作，比如对 canvas 、svg 的操作，服务器请求，订阅都可以写在这里，但是记得要在 componentWillunMount 中取消订阅。

1、组件已经挂载到页面中2、可以进行DOM操作，比如：获取到组件内部的DOM对象3、可以发送请求获取数据4、可以通过 setState() 修改状态的值注意：在这里修改状态会重新渲染 2、更新阶段: 由组件内部this.setSate或父组件重新render触发，该阶段的函数执行多次,每当组件的 props 或者 state 改变的时候，都会触发运行阶段的函数

getDerivedStateFromProps:此方法在更新挂在阶段都可能回调用。 shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState)有两个参数 nextProps和 nextState, 标识更新的属性和变化之后的 state, 返回一个布尔值，true标识会触发重新渲染，false 标识不会触发重新渲染，默认返回 true， 我们通常利用此声明周期来优化 React 程序性能。

作用：根据这个方法的返回值决定是否重新渲染组件，返回 true 重新渲染，否则不渲染优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能说明：如果返回值为 false，那么，后续 render()方法不会被调用注意：这个方法必须返回布尔值！！！场景：根据随机数决定是否渲染组件 render:更新阶段也会触发此生命周期。

作用：重新渲染组件，与 Mounting 阶段的 render 是同一个函数注意：这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行 getSnapshotBeforeUpdate:getSnapshotBeforeUpdate(prevProps, prevState)这个方法在 render 之后， componentDidUpdate 之前调用，有两个参数 prevProps 和 prevState，标识之前的属性和之前的 state， 这个函数有一个返回值，会作为第三个参数传给 componentDidUpdate，如果不想要返回值， 可以返回 null， 此生命周期必须与 componentDidUpdate 搭配使用。 componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps、prevState、snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。

作用：组件将要更新参数：最新的属性和状态对象注意：不能修改状态 否则会循环渲染 3、卸载组件: 由ReactDOM.unmountComponentAtNode触发

componentWillUnmount:会在组件卸载以及销毁之前调用，在此方法中执行必要的清理操作，例如，清除定时器，取消网络请求或者清除在 componentDidMount() 中创建的订阅，清理无效的 DOM 元素等垃圾清理工作。 4、异常处理

static getDerivedStateFromError: 此声明周期会在渲染阶段后代组件抛出错误后被调用，他将抛出的错误作为参数，并返回一个值以更新 statecomponentDidCatch: 此生命周期在后代组件抛出错误后背调用，他接受两个参数: error —— 抛出的错误; info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。componentDidCatch 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况。

在新版本中也可以用旧的生命周期，但会警告提示甚至报错： 所以对于这三个钩子：componentWillMount、componentWillUpdate、componentWillReceiveProps需要加上 UNSAFE_ 前缀才行

参考链接