React 基础与实践

React 简介与特性

React简介

React是Facebook开发的一款JS库，那么Facebook为什么要建造React呢，主要为了解决什么问题，通过这个又是如何解决的？

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特性

声明式设计

React采用声明范式，可以轻松描述应用。无须使用变量，避免了创建和修改状态，使最终的代码简单易于维护。

组件化（高效）

React通过对DOM的模拟（虚拟DOM，Virtual DOM），最大限度地减少与DOM的交互。

跨平台编写（灵活）

React可以与已知的库或框架很好地配合。

Ant Design

一个可以用来快速设计后台 / 内部应用的 UI 库。它拥有一个社区、大量支持文档，还有一个带有预制模板的单独项目AntDesignPro。

React-Bootstrap

一个具有 Twitter 的 Bootstrap 的观感的 React 组件库。它的极简风格在社区中有很高的热度。

React-Transition-Group

React-Transition-Group提供了用于定义动画的简单组件，该库并未定义样式本身，而是以有用的方式操作DOM，从而使过渡和动画的实现更加舒适。

React-Redux

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。

更新流程

React 的渲染流程是: JSX → 虚拟 DOM → 真实 DOM
React 的更新流程是: props/state 改变 → render 函数重新执行→产生新的 DOM 树→新旧 DOM 树进行 diff→ 计算出差异进行更新→更新到真实的 DOM

React基础温故知新

1、JSX

JSX 是 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以它既具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。

2、元素渲染

要将一个 React 元素渲染到 DOM 节点中，只需把它们一起传入 ReactDOM.render()。如果 UI 要更新，那就需要重新调用 ReactDOM.render()。重新渲染时，React 只会更新变化的部分 —— 虚拟DOM & diff。

3、组件 & props

React 中编写组件有 2 种方式：函数和 class（类组件）。组件首字母必须大写。【如果组件只有一个 render 方法，没有 state 这些，写成函数组件比较简洁】

用React开发web

为了构建 Web 应用，开发人员将 React 与 ReactDOM 结合使用。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。 React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使您可以专注于 UI 设计 (译者注：显而易见，此设计不等于视觉稿的设计)。

业务场景案例

如何划分组件

组件的分类方式有很多种，最常见的分类展示型组件和容器型组件，无状态组件和有状态组件，函数组件和类组件。接下来将从这三个方面说一下react组件。哈哈，被你看穿了，这是一篇咬文嚼字的文章，但是组件的分类弄明白以后，对日后页面组件的划分，组件的使用以及组件的解耦都非常方便。

展示型组件和容器型组件

展示型组件和容器型组件的划分规则是组件的工作职责。

容器型组件：容器型组件主要是组件是如何工作的，更具体的就是数据是怎么更新的，它不包含任何的Virtual DOM的修改和组合，也不会包含组件的样式。用一句话说，其实就是容器型组件只关系数据的更新，别的都不在乎，比较钟情。展示型组件：展示型组件在意的是组件是怎么渲染的。它包含了VirtualDOM的修改或者组合，也可能包含组件的样式。同时，它不依赖任何形式的store。

展示型组件是具体到某个小的组件模块，你比如说一个按钮，一个进度条等，我们在用react做组件化开发的时候，先定义好一个个小的展示型组件，然后把这些组件都导入容器型组件，最终组合成一个完整的页面

通信案例

某些情况下，我们需要从子组件向父组件传递消息。在 React中同样是通过 props 传递消息，只是此时由父组件传递给子组件一个回调函数，在子组件中调用此函数即可。

附代码：

const formRef=useRef(null);

FormComponent

return( onst FormComponent =(props,ref)=>{

const [formInstance] =Form.useForm();

／／给 ref 添加 change，clear 方法

Wrapper Operations: useImperativeHandle(ref, ()=≥({

<Button onClick={()=>formRef.current?.change() change: () formInstance.setFieldsValue(newValue),

Change clear: () > formInstance.clearFields(I'username', 'email'1),

1);

<Button onClick={()=>formRef.current?.clear()} Clear

return(

<FormComponentwithRef ref={formRef1./21

...//

); );

};

组件间共享信息

我们知道，props可以将数据从父组件传递给子组件。

现在，顶级组件App要传递theme这个数据给底层组件Button，经历了这么一个传递路径：App–>Toolbar–>Button。然而，Toolbar根本用不上theme，它只是一个中转站。在组件设计过程中，我们常常尽力弱化组件间的依赖关系，以期望组件之间彼此独立。这里用组件扮演中转站的角色明显辜负了我们的期望。如果有个全局变量就好了，诶，React给我们提供了类似于全局变量的东西来实现数据共享，那就是Context。

React常见API及作用

课程总结与答疑

1.  搭建React开发环境。切换镜像。初始化react项目。npx create-react-app [项目 …

JSX语法。语法糖，本质是为了更加方便的实现效果虚拟DOM 与 diff算法渲 …
组件分类。组件名称首字母必须大写（调用组件时不大写会报错）函数式组件。 …
事件函数的定义。普通函数定义方式（定义生命周期）必须要在constructor中修

[ React 基础与实践 | 青训营笔记 ]