代码训练营1-待解决的问题

1. react组件什么时候render
2. 什么是生命周期函数？有什么用？
3. 组件什么时候会被销毁
4. 受控组件、非受控组件
5. 不可变数据
6. React components 与React elements关系 
7. JSX —> react.createElement 语法糖 
8. Renderprops ，和函数组件有什么区别？
9. Setstate之后发生了什么 官方文档->FAQ->组件状态

 

1、react什么时候render

1.首次挂载

2.通过setState修改state值

3.调用reactDom.render

4.传入新的props、props发生变化

5.forceUpdate()

 

 

2、生命周期

 

当组件实例被创建并插入DOM中时，生命周期调用顺序如下：

constructor 

static getDericedStateFromProps

render

componentDidMount

 

组件props 或state变化时会触发更新，生命周期调用顺序如下：

static getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

 

生命周期方法 ----用于在组件不同阶段执行自定义功能

render

　　应该为纯函数，不改变组件state的情况下，每次调用都返回相同的结果。

　　会返回 react元素／数组或fragment ／portals ／ 字符串或数值类型 ／ 布尔类型或null 

　　如果shouldComponentUpdate返回false，不会调用render

constructor

　　1、只有当需要初始化state或对方法进行绑定时，需要为React组件实现构造函数。

　　2、调用时机：在react组件挂载之前

　　3、避免将props的值复制给state，会产生bug（更新props中的color，并不会影响state）

 

componentDidMount

　　1、调用时机：会在组件挂载后立即调用，

　　2、此处可放置依赖于DOM节点的初始化，例：通过网络请求获取数据，实例化请求 

componentDidUpdate

　　1、调用时机：在更新完成后立即调用，首次渲染不会执行

　　2、若在此方法内调用setState，必须被包裹在条件语句里，否则，会导致死循环

　　3、可接受参数 componentDidUpdate(prevProps, prevState, snapshot)  若组件实现了getSnapshotBeforeUpdate，那么它的返回值将作为第三个参数"snapshot"

 

　　componentWillUnmount

　　1、调用时机：在组件卸载或销毁前直接调用，

　　2、用来执行必要的清理操作，例：清除timer、取消网络请求，清除componentDidMount中创建的订阅

　　3、不应调用setState

 

----不常用-----

shouldComponentUpdate

　　1、根据shouldComponentUpdate的返回值，判断react组件的输出是否受当前state或props更改的影响。props或state发生改变时，shouldComponentUpdate会在渲染执行之前被调用

　　2、

　　3、

 

static getDerivedStateFromProps

 　　1、调用时机：会在调用render方法之前调用，并且在初始挂载及后续更新时都会被调用。会返回一个对象来更新state，若返回null不更新任何内容

　　2、适用于：state的值任何时候都取决于props

static getSnapshotBeforeUpdate

 　　1、调用时机：在最近一次渲染输出之前调用，使组件在发生更改之前从DOM中捕获信息。

static getDerivedStateFromError

 　　1、后代组件抛出错误后调用，将抛出的错误作为参数，并返回一个值更新state

componentDidCatch

　　1、发生错误可以通过调用setState使用componentDidCathc渲染降级UI，

 

 

---过时的----将会使用至React17 

componentWillMount

 　　1、在挂载之前被调用，在此方法中同步调用setState不会触发额外渲染。

　　 2、服务端渲染唯一会调用的生命周期

componentWillReceiveProps

 　　1、使用此生命周期方法会出现bug和不一致性

　　　　a.执行side effect以响应props中的更改，需该用componentDidUpdate

　　　　b.使用componentWillReceiveProps仅在props更改时重新计算某些属性，可使用memoization（useMemo)

　　　　c.使用componentWillReceiveProps仅在props更改时重置state，可使组件完全受控或使用key使组件不完全受控

　　2、不会对初始props调用该生命周期方法，只会在组件props更新时调用此方法。

　　3、调用this.setState不会触发此生命周期方法

componentWillUpdate

 　　1、收到新的props或state时，会在渲染之前调用，初始渲染不会调用此方法。

一些API

setState

　　1、将对组件state的更改排入队列，批量推迟更新，不总是立即更新

　　2、调用setState其实是异步的，如果需要基于当前state计算出新的值，应传递一个函数而不是一个对象。传递一个函数可以在函数内访问到当前state的值，可以进行链式更新。

　　　　

　　　　 

　　3、在事件处理函数内部的setState是异步的，

forceUpdate

 

 

　　包含不常用的生命周期 

 

3、组件什么时候销毁

　　当组件从DOM中移除时会调用如下方法：

　　componentWillUnmount

 

4、受控组件、非受控组件

　　受控组件：用props传入数据，组件被传入的值所控制。用户将数据输入到受控组件时，会触发修改状态的事件处理器。

　　非受控组件：用户输入数据到表单字段后，React不需要做任何事情就可以映射更新后的信息。同时意味着，无法强制给这个表单字段设置一个特定值。

 

5.不可变数据

　　不可变数据每次变更都是生成一个新的对象，而不是修改原来的对象，这样，在判断对象是否发生变化时，只需要检查对象的引用是否发生变化。

　　不可变数据可以方便地追踪对象的变化，可以提升性能。

　　举个?

　　

　　　在第1行里定义了对象x，在第2行中，将x赋给了y，我们想做到的时将x的对象信息copy给y，但是该操作实际实现的时，将y的引用指向了x指向的对象，

　　　在第3行中改变了y指向的对象的属性，由于x、y指向的都是同一对象，所以对比结果为true。

　使用不可变数据后

　　方法1:使用concat

 

　　方法2:使用拓展运算符

 

　　方法3:使用object.assign

 

　　方法4：其他一些帮助实现不可变数据的库，例：Immer、immutable等

 

6. React components 和React elements关系

　　1.组件，由元素组成　　

　　2.组件，概念上类似于javascript函数。它接受任意的入参(props)，并返回用于描述页面展示内容的React元素。

　　3.通过React.createElement()创建了一个对象，该对象被称作 “React elements”（React元素）,react通过读取这些对象，使用它们构建DOM并保持随时更新。

　　4.react 元素通过 ReactDOM.render 将一个React元素渲染到DOM节点中

 

7.JSX

　　React.createElement的语法糖，JSX可以生成React元素，

　　　

8.renderprops 和函数组件有什么区别

　　render props 是指在React组件中使用一个值为函数的prop共享代码的技术

　　具有render prop 的组件，该函数返回一个React元素

9.setState之后做了什么

　　会对组件的state对象安排一次更新

 

 

 

 

 

转载于:https://www.cnblogs.com/LXIN-Y/p/11203719.html