react基础知识

组件分为类组件和函数组件
类组件禁止修改自身的props值
函数组件接收一个单一的 props 对象并返回了一个React元素
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

特点

：虚拟DOM并非真实DOM，可以服务器渲染，遵循单向数据流 or 数据绑定。

优点

• 它提高了应用的性能
• 可以方便地在客户端和服务器端使用
• 由于 JSX，代码的可读性很好
• React 很容易与 Meteor，Angular 等其他框架集成
• 使用React，编写UI测试用例变得非常容易

Props

Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。

state

状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。
可以用this.setState()更新组件的状态

props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。
state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。

生命周期

1. 初始和挂载阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
   ⇒ componentWillMount –在渲染之前执行，在客户端和服务器端都会执行。
   ⇒ componentDidMount – 仅在第一次渲染后在客户端执行。
2. 更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
   ⇒componentWillReceiveProps– 当从父类接收到 props 并且在调用另一个渲染器之前调用。只要在另一个渲染被调用之前更新 props 就被调用。 当我们更新状态时，从 setNewNumber 触发它。
   ⇒shouldComponentUpdate– 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true* 否则返回 false。默认情况下，它返回 false。
   ⇒componentWillUpdate–在 DOM 中进行渲染之前调用。 在由shouldComponentUpdate确认返回正值的优点和状态更改时，在重新渲染组件之前执行
   ⇒componentDidUpdate–在渲染发生后立即调用。通常用于更新DOM以响应属性或状态更改。
3. 卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。
   ⇒componentWillUnmount –它将用于取消任何传出的网络请求，或删除与该组件关联的所有事件侦听器。用于清理内存空间。

受控组件

1. 没有维持自己的状态
2. 数据由父组件控制
3. 通过 props 获取当前值，然后通过回调通知更改

input中的onChange事件进行改变value值

非受控组件

1. 保持自己的状态
2. 数据有DOM控制
3. Refs用于控制其值

input中的defaultValue，placeholder属性

高阶组件（HOC）

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。可以理解为展示组件（Purecomponent）
代码重用，逻辑和引导抽象；渲染劫持；状态抽象和控制；Props 控制
在 React 中用于复用组件逻辑的一种高级技巧
高阶组件的参数为一个组件返回一个新的组件
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件

Virtual DOM

Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。

工作原理

• 每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
• 计算之前 DOM 表示与新表示的之间的差异。
• 只用实际更改的内容更新 real DOM。

Refs是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。(input)

Redux

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。状态不可改变，容器组件之间相关联，带有分层 reducer 的单一 Store，只有一个Store，Store 和更改逻辑是分开的

原则

• 单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。
• 状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
• 使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

组件

Action – 这是一个用来描述发生了什么事情的对象。⇒ Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。

Reducer – 这是一个确定状态将如何变化的地方。 ⇒ 纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

Store – 整个程序的状态/对象树保存在Store中。⇒ JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

View – 只显示 Store 提供的数据。

redux 优点

• 结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
• 可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。
• 服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。
• 开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。
• 社区和生态系统 - Redux背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。
• 易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
• 组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。

React Hooks

Hooks允许你在不写class的情况下操作state 和react的其他特性。
Hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。

优点=>无需复杂的DOM结构; 简洁易懂

Flux与MVC

传统的MVC模式在分离数据（模型），UI（视图）和逻辑（控制器）的关注方面效果很好，但是MVC架构经常遇到两个主要问题：

数据流定义不佳： 跨视图进行的级联更新通常会导致纠结的事件网，难以调试。
缺乏数据完整性： 可以从任何地方对模型数据进行突变，从而在整个UI上产生不可预测的结果。

使用Flux模式，复杂的UI不再受到级联更新的困扰。任何给定的React组件都将能够根据商店提供的数据重建其状态。Flux模式还通过限制对共享数据的直接访问来增强数据完整性。

参考
参考