React的生命周期
React的生命周期从广义上分为三个阶段：挂载、渲染、卸载
因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。
React的生命周期图:
constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。
componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。
组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
在此处完成组件的卸载和数据的销毁。
原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning
解决方法：
shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。
代替componentWillReceiveProps()。
老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。
举个例子:
这两者最大的不同就是:
在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。
代替componentWillUpdate。
常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。
这两者的区别在于：
为何要使用React Hooks?
而函数组件作为一个函数，是没有继承React.Component的，他只需要两步 1.找到组件 2.渲染组件 ，所以也就 不存在生命周期，以及状态及this。这就意味着，函数组件实现有关state的管理，需要借助redux，秉承redux能不用就不用的准则（其实有的时候还蛮香的，全局管理方便），往往会另功能简单的React组件...
React 页面空白之错误边界
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界 React中提供了两个与错误处理相关的api：如果一个 class 组件中定义了 getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）...
React.PureComponent
如果赋予 React 组件相同的 props 和state， render() 函数会渲染相同的内容，在某些情况下使用 React.PureComponent 可提高性能。参考链接： https:\/\/zh-hans.reactjs.org\/docs\/react-component.html#shouldcomponentupdate 这是一个不太常用的生命周期方法 ...
HOOK—useState、useEffect的使用
HOOK是React的新增特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。下面主要介绍一下useState和useEffect 的使用。通过在函数组件里调用它来给组件添加一些内部 state。useState 会返回一对值：...
React Fiber原理?
需要关注react为任务片设置的优先级,特别是页面用动画的情况。如果一直有更高的级别任务,那么fiber算法会先执行级别更高的任务,执行完毕后再通过callback回到之前渲染到一半的组件,从头开始渲染。(看起来放弃已经渲染完的生命周期,会有点不合理,反而会增加渲染时长,但是react确实是这么干的) 已赞过 已踩过< 你对...
React页面返回上一页时恢复原来页面的状态
2. 设置列表滚动条位置初值。在列表渲染后，审查节点以找出滚动条对应的元素，作为目标进行DOM操作。在离开页面时记录滚动条位置，通常在生命周期方法didMount里操作DOM设置滚动条的初始位置。离开页面时可以是componentWillUnmount或页面跳转前。操作DOM时，可使用原生JavaScript方法结合ReactDom的FindDOMNode方法...
React Hook
2.useEffect(callback, arr) 作用：处理函数组件中的副作用，如异步操作、延迟操作等。useEffect有两个参数，callback和数组依赖项，无arr时相当于componentDidMount生命周期，有arr时相当componentDidMount和componentDidUpdata生命周期。如果callback中有return，则相当于componentWillUnmount。3.useContext ...
hooks是什么意思译?
Hooks是React 16.8引进的新特性。它使得在函数式组件中使用状态(state)与生命周期方法的能力成为可能。使用Hooks，我们可以从函数中触发相应的函数(类似回调)，改变一个组件局部或整体的状态。Hooks具有以下的优点，它带来了编写React代码的变革。首先，它可以大大降低状态管理的复杂度。其次，Hooks完全支持...
[React] 子组件向父组件通信:回调函数
在React中，子组件向父组件通信时，可以使用回调函数，或者自定义事件。 在简单的场景中，回调函数常用的办法。注： （1）setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。 在 componentWillMount 中执行 setState 方法，组件会更新 state ，但是组件只渲染一次。 因此...
jsp迁移到react
下面是基本的迁移步骤：1. 确定迁移范围：确定要迁移的JSP页面，并根据页面的复杂度和重要性进行优先级排序。2. 实现组件化：将JSP页面拆分为更小的组件，每个组件对应一个React组件。这样可以提高代码的可维护性和重用性。考虑使用React的生命周期方法和Hooks来处理组件的状态和副作用。3. 数据传递：分析...
进垂汝宁： React 组件的生命周期有三个不同的阶段: *初始渲染阶段:*这是组件即将开始其生命之旅并进入 DOM 的阶段. *更新阶段:*一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染.这些只发生在这个阶段. *卸载阶段:*这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除. React,现在学习前端肯定要学到的知识,想了解更多知识,可以看黑马程序员react视频教程,里面知识还是蛮多的!
商都县18570544293： React的生命周期到底是怎么一回事 - ？
进垂汝宁： React组件的生命周期可以分为挂载、渲染和卸载这几个阶段,当渲染后的组件更新后,会重新渲染组件,直到卸载.先分阶段来看看每个阶段有哪些生命周期函数.
商都县18570544293： React数据获取为什么一定要在componentDidMount里面调用 - ？
进垂汝宁： 这与React组件的生命周期有关,组件挂载时有关的生命周期有以下几个:constructor() componentWillMount() render() componentDidMount() 上面这些方法的调用是有次序的,由上而下,也就是当说如果你要获取外部数据并加载到组件上,...
商都县18570544293： react.js中能使用break么,用什么退出当前程序 - ？
进垂汝宁： React就是js的语法,break是用来跳出for和while循环的.没有退出React这个说法,当运行完render()就是画完了react控件(可能还会进 componentDidMount等方法,参见组件生命周期),如果要在render()中途退出,需要用return.组件生命周期: http://reactjs.cn/react/docs/component-specs.html
商都县18570544293： react 里 loading 写在哪个生命周期里 - ？
进垂汝宁： 据说是15年10月左右.reactnative目前只放出了ios版本,Android官方回应需要等待6个月,所以,如果希望以后使用react开发Android应用,可以先学一下web下的react开发,感受一下react
商都县18570544293： 问react中 componentWillMount,componentDidMount有什么用处 - ？
进垂汝宁：react中 componentWillMount,componentDidMount用处是: componentWillMount 组件出现前就是dom还没有渲染到html文档里面,componentDidMount 组件渲染完成,已经出现在dom文档里,可以在各个周期实现特定的操作.一、...
商都县18570544293： react 哪些生命周期setstate会触发重复渲染 - ？
进垂汝宁： 如果直接操作的state对象需要调用forceUpdate方法 如果用setState 就会自动重新渲染的
商都县18570544293： 在react组件中谢了一个js方法,当onChange时调用,为什么在组件挂载时就调用了 - ？
进垂汝宁： React组件有自己的生命周期,不推荐这样写事件.在componentDidMount()里注册事件: $(＂#imageInput＂).on(＂change＂,function(){...});在componentWillUnmount()里取消绑定,这一步可选:$(＂#imageInput＂).off(＂change＂); React组件生命周期: http://reactjs.cn/react/docs/component-specs.html 一定要用你的方式也可以,多加一个参数event,从event中区别是在render的时候调用的,还是上传文件的时候调用的,强烈不推荐.
商都县18570544293： react onchange 其他组件怎么用 - ？
进垂汝宁： 用import 举个例子 你在外框架安装过anr design 到了具体页面那里 用 import {input} from 'ant' 这样
商都县18570544293： react 生命周期 哪些可以setstate 为什么 - ？
进垂汝宁： setState(object nextState[,function callback]) 合并nextState 和当前 state.这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法.另外,也支持可选的回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用.
