这是我参与「第四届青训营 」笔记创作活动的第4天

响应式系统与React

React的历史

• 2010年，Facebook在其php生态中引入了xhp框架，首次使用了组合式组件的思想，为React的出现奠定了基础
• 2011年，Jordan Walke创造了FaxJS，即React的原型
• 2012年，在fb收购ins之后，FaxJS项目在其中得到使用，Jordan Walke基于FaxJS，创造了React
• 2013年，React正式开源
• 2014年至今，各种基于React的工具开始出现，生态大爆发

React的设计思路

UI的设计难点（React出现的原因）

• 例如苹果官网的商品详情页，在页眉，选项框，结算框要显示价格，随着用户选择不同的商品颜色，配置还需要动态更新价格。

  
  1. UI不会自动更新，需要手动操作DOM树更新各个位置的价格。
  2. 代码层面混乱，没有组件化，完全过程化，没有进行封装与隔离。
  3. UI之间互相依赖关系复杂，路线长，代码冗余复杂难以维护

响应式系统

• 监听事件，消息驱动。
• 当事件发生，执行既定的回调，进行状态更新，在UI设计中，还需要进行UI渲染
  1. 在事件发生时，UI自动更新
  2. 前端代码组件化，封装性高，可复用，组合。
  3. 组件之间相互依赖关系只需声明一下即可，逻辑清晰。

React组件

• 组件可以是原子组件，也可以是组件的组合。
• 每个组件内部拥有状态（state），外部不可见。
• 父组件可以将自己的状态传递给子组件。

组件的状态归属问题

• 有可能在同一个页面具有多个相同的信息，例如上述例子中的价格，分别存在于页眉，结算框等位置。
• 价格这个状态应该位于所有出现价格的组件的最近公共祖先这个组件。
• 总结：当一个状态可能出现多次时，其应该存在于一个所有组件共同的祖先组件中。

组件的修改问题

• 当一个状态出现在一个父组件中，有多个子组件使用了这个状态，如何在某些事件发生时在子组件中更改父组件中的状态

  • 在父组件中声明更改状态的函数，将函数传递给子组件。

• React的状态是单向传递的，数据只能向下传递。

组件化

• 组件定义了状态与UI之间的映射关系
• 组件有Props、State两种状态
• 组件可由多个子组件组合而成

React组件代码结构

• 组件内部拥有私有状态state

• 组件接收外部状态props

• 将state和props渲染成ui返回

  

React写法

• React分为类组件和函数式组件
• 其中类组件在构造函数中定义state，在render函数中返回UI
• 函数式组件使用Hooks（钩子）实现react

函数式组件（Hooks）写法

• useState用法：const [state, setState] = useState(初始值)
  • 以上建立了一个名为state的状态，返回状态和设置状态的方法。
  • 在React中如果需要修改状态只能使用setXXX方法，不能直接修改state。
• useEffect用法：useEffect(() => { doSomething; }, [a, b])
  • useEffect的第二个参数为一个数组，当数组中的元素发生变化时，会调用一次第一个参数传入的回调函数，如果第二个元素不设置则每次出现状态更新都会调用，如果第二个元素设置为空数组则只会在初始渲染完成后调用一次。

总结

• 本次课程学习了响应式系统与React的基础，了解到响应式系统的设计理念与设计方法，理解了React哲学。对于函数式编程有了更深一步的理解，了解了实际工程上如何利用React开发前端。