React开发笔记，React立意选取最小块设计，元素化每个dom标签，在内存中进行操作，引起Dom的最小render，节约

componentWillReceiveProps(newProps) 在props发生改变（父组件重新render或者更新props）时调用，这个钩子提供对 props 的监听，在 props 发生改变后，相应改变组件的一些 state。在这个方法中改变 state 不会二次渲染，而是直接合并 state。 shouldComponentUpdate(nextProps, nextState) 这个钩子相当于一个阀门，返回一个布尔值，决定是否更新组件。 由于 react 父组件更新，必然会导致子组件更新，因此我们可以在子组件中通过手动对比 props 与 nextProps，state 与 nextState 来确定是否需要重新渲染子组件，如果需要则返回true，不需要则返回 false。该函数默认返回 true。 componentWillUpdate 组件更新前调用的钩子 componentDidUpdate 组件更新完成后调用的钩子 因为组件已经重新渲染了所以这里可以对组件中的 DOM 进行操作； 在比较了 this.props 和 nextProps 的前提下可以发送网络请求 React是JavaScript库，用于构建用户界面，特别是单页面应用程序。其核心理念是通过最小化DOM操作来提高性能，这是通过引入虚拟DOM实现的。虚拟DOM是React在内存中创建的一个DOM表示，允许它高效地计算出最小的变更集，从而减少实际DOM的更新次数。 在React中，组件是构建UI的基本单元，它们有自己的状态（state）和属性（props）。当组件的状态或属性发生变化时，React会执行一系列生命周期方法，以便高效地更新UI。这些方法包括： 1. `componentWillMount`：在组件即将被渲染到DOM之前调用，此时可以做一些准备工作，但不建议在此处修改状态，因为不会触发重渲染。 2. `render`：这是React组件的核心方法，负责生成React元素表示的UI，并且可以根据状态和属性的变化动态更新。 3. `componentDidMount`：组件已经成功挂载到DOM后调用，适合在这里进行网络请求、设置定时器或订阅事件等操作。 4. `componentWillReceiveProps(newProps)`：当组件接收到新的props时调用，通常用于根据新的props更新组件状态，不会导致二次渲染，状态的改变会直接合并。 5. `shouldComponentUpdate(nextProps, nextState)`：此方法用于决定组件是否需要更新。默认返回`true`，表示组件应该更新。通过自定义这个方法，可以优化性能，比如比较当前props和nextProps以及当前state和nextState，返回`false`以阻止不必要的渲染。 6. `componentWillUpdate`：在组件更新前调用，可以在此进行一些更新前的准备，但不推荐在此更改状态。 7. `componentDidUpdate(prevProps, prevState)`：组件更新完成后调用，适合在此执行DOM操作，如设置样式或调整DOM结构，同时也可以发起网络请求。 8. `componentWillUnmount`：在组件卸载前调用，用于清理如定时器、订阅等副作用。 React的生命周期分为挂载、更新和卸载三个阶段。在新的React版本中，为了提升性能和避免意外的副作用，部分生命周期方法如`componentWillMount`、`componentWillReceiveProps`和`componentWillUpdate`已被废弃，推荐使用类组件的`getDerivedStateFromProps`静态方法和函数组件的Hooks（如`useEffect`和`useMemo`）来进行相应的处理。 React的趋势是走向面向对象编程与函数式编程的结合，鼓励组件的组合而非继承，这样能提供更高的灵活性和可维护性。jsx语法使得编写React组件更像编写HTML，但其实最终会被Babel转换为JavaScript代码执行。 React通过虚拟DOM和生命周期方法提供了高效的UI更新策略，让开发者能够专注于组件的逻辑和界面的构建，而无需过多关注底层DOM操作。通过理解并合理利用生命周期方法，可以显著提升React应用的性能和用户体验。