React初识 | 青训营

58 阅读3分钟

React是由Facebook创建的一个JavaScript库,用于构建用户界面。它的主要作用是帮助开发者构建高效、交互性强、可维护的用户界面,尤其适用于单页面应用(Single Page Applications)和大规模应用程序的开发。

学习React所需的前置知识:

1.HTML、JS、CSS基础

2.基础的数据结构/算法知识,如二叉树,深度遍历等。

3.会使用浏览器提供的DOM API来修改DOM,更新UI。

前端框架 React 的发展历史以及应用场景

React的应用场景有:

  • 前端应用开发,如Facebook,Instagram,Netflix网页版
  • 移动原生应用开发,如Instagram,Discord,Oculus
  • 结合Electron,进行桌面应用开发。
  • 三维图形/AR/VR的应用场景

发展历史:一个软件的发展历史有助于让开发者了解人们因为什么需求而开发这个软件

2010年:Facebook在其php生态中,引入了xhp框架,首次引入了组合式组件的思想,启发了后来的React的设计。

2011年:Jordan Walke创造了FaxJS,也就是后来的React原型

FaxJS的四个特性:

  • Seamless Client Server Rendering:框架既可以在服务端渲染也可以在客户端渲染
  • Reactive:响应式,拥有React框架时状态变更会同时更新UI,无需手动更新DOM结构。
  • Performant:更新UI时有较好的性能
  • Structural:给前端代码一个组件级别的复用封装,这些组件是用函数声明的,无需手动调用DOM结构

2012年:在Facebook收购Instagram后,该FaxJS项目在内部得到使用,Jordan Walke基于FaxJs的经验,创造了React,为一个JS的库,而并非框架。

2014年-至今:生态大爆发,各种围绕React的新工具/新框架开始涌现

React的设计思路-UI编程痛点

当有许多个可触发的组件导致UI更新,会导致JS代码挂载许多onClick和callback事件,这样会导致代码十分复杂和混乱

难题1. 状态更新,UI不会自动更新,需要手动地调用DOM进行更新。

难题2.欠缺基本的代码层面的封装和隔离,代码层面没有组件化。

难题3.UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会碰到一堆Callback的问题。

UI的响应式编程:事件->执行既定的回调->状态变更->UI更新

解决方式:

1.状态更新,UI自动更新。

2.前段代码组件化,可复用,可封装。

3.状态之间的互相依赖关系,只需声明即可。

React的组件化:例:

image.png

  • 组件是 组件的组合/原子组件
  • 组件内拥有状态,外部不可见
  • 父组件可将状态传入组件内部,父组件为控制组件
  • React是单向数据流:永远是父组件给子组件传递数据

组件设计

1.组件声明了状态和UI的映射

2.组件有Props/State两种状态。

3.“组件”可由其他组件拼装而成。

组件代码形式:不限于JS结构

1.组件内部拥有私有状态State

2.组件接受外部的Props状态提供复用性。

3.根据当前的State/Props,返回一个UI。

例:

image.png

React的生命周期:

image.png