React入门分享

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一、背景

React.js（后文简称React）起源于Facebook的内部项目，在前后端分离热潮环境下，这个项目越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案，由React衍生出用于编写原生移动应用的React-Native也在2018年GitHub最顶尖开源项目贡献量排行榜中位居第二（图1）。可以说React是目前最热门的前后端框架之一。

                                                                                          图1

 

二、前期知识储备

1.ES6简介：

使用React的前端项目基本都是由JS写的，所以要使用React还需要提前了解新的JS语法标准——ES6（ECMAScript6）。

                                                                                             图2

2.ES6新功能：

  • 区分了常量和变量：常量const，变量let；

  • 新增块级作用域：{}；

  • 新增了箭头函数，相当于将函数定义“function”做了简写，几种等价写法（图3）；

  • 新增了扩展运算符，可以更方便的用于合并数组，复制数组和结构赋值等；

更多ES6知识可以在以下网址了解：

  • 你需要了解的 ES6 语法 : https://www.yuque.com/ant-design/course/byllph

  • 《ES6标准入门》: http://es6.ruanyifeng.com/

                                                                                         图3

三、React基本环境安装

1.React是什么？

准确的说，React只是一个帮助构建页面UI的库，React 的组件就相当于 MVC 里面的 View。

所以说React基本不可能单独使用，不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React不管在开发阶段生产阶段都需要一堆工具和库辅助，需要借助 Babel编译；需要 Redux 等第三方的状态管理工具来组织代码等，这就是所谓的“React.js全家桶”。在实际项目开发中会使用到各种各样的框架，我们经常使用到的有Dva.js，Next.js和Umi.js等框架。

2.服务器运行环境——node.js

  • node.js下载地址：https://nodejs.org/en/download/

  • npm——node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），它让 JavaScript 开发者分享、复用代码更方便

3.安装淘宝镜像

因为npm安装插件是从国外服务器下载，受网络影响大，可能会导致异常，所以淘宝团队制作了淘宝NPM镜像——这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  • 淘宝npm镜像地址：http://npm.taobao.org/

4.引入依赖和启动项目

cnpm install , npm run dev/npm start

四、组件

1、使用蚂蚁金服Ant Design封装好的组件

1)、安装依赖：cnpm install antd --save

2)、在需要用到的文件顶部导入，如：import{Input,Upload,message,Buttom} from ‘antd’;

3)、使用：<Input />,<Button />等

  • 详细用法参考Ant Design官方文档：https://ant.design/index-cn

2、自定义组件——无状态与有状态组件

1)、构造（图4）：

两种组件都是写在.js文件中，类似于HTML代码写在return()中，这种看起来“在 JavaScript 写标签的”语法叫 JSX，React用JSX来描述页面信息，最后将样式渲染在页面上。

                                                                                                图4

下表对两种组件进行了一个对比（表1）：

 

无状态组件

有状态组件

构造

用构造函数或const声明创建出来的组件

用class关键字创建出来的组件

使用情况

若一个组件不需要有自己的私有数据，则使用该类型组件

若一个组件需要有自己的私有数据（this.state），则使用该类型组件

本质区别

有无state属性和有无生命周期函数

 

                                                                                                 表1

2)、state与props

在React的组件中有两个非常重要的概念——state与props

一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，就像一个点赞按钮，可以有“已点赞”和“未点赞”状态，并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。

组件是相互独立、可复用的单元，一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同，例如一个点赞按钮组件，在我这里需要它显示的文本是“点赞”和“取消”，当别的同事拿过去用的时候，却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求，我们就要让组件具有一定的“可配置”性。

React 的 props 就可以帮助我们达到这个效果，每个组件都可以接受一个 props 参数，它是一个对象，包含了所有你对这个组件的配置。

下表对两个概念进行了对比（表2）：

state

props

·state中的数据都是组件私有的

·state中的数据都是可读可写的

·state的主要作用是用于组件保存、控制、修改自己的状态

·state在组件内部初始化，可以被组件自身修改，外部不能访问也不能修改

·state中的数据可以通过this.setState方法进行更新，该方法会导致组件的重新渲染

 

·props的数据都是从外界传递来的

·props的数据都是只读的，不能重新赋值

·props的主要作用是让使用该组件的父组件可以传入参数来配置该组件

·props是外部传进来的配置参数，组件内部无法控制也无法修改

·除非外部组件主动传入新的props，否则组件的props保持不变

 

state是让组件控制自己的状态，props是让外部对组件进行配置

                                                                                                   表2

3.值传递

组件和组件之间传递值，model层（后文介绍）和组件之间传递值都是通过props进行的。举个简单的例子，先按照官网指引创建一个项目（https://ant.design/docs/react/practical-projects-cn）在src/pages/index.js中分别定义两个简单的组件：

  1. //function HelloReact() {  

  2. const HelloReact = () => {  

  3.   return(  

  4.     <div>  

  5.       <h1>这是一个组件中的H1标题</h1>  

  6.       <PropsComponent name='qqq'/>  

  7.     </div>  

  8.   )  

  9. };  

  10.   

  11. class PropsComponent extends React.Component{  

  12.     render(){  

  13.         return(  

  14.             <div>  

  15.                 {this.props.name}  

  16.             </div>  

  17.         )  

  18.     }  

  19. };

  20.   

  21. export default HelloReact  

在浏览器输入 http://localhost:8000可以看到如下页面（图5）

                                   图5

我们把HelloReact称为PropsComponent的父组件，两者可以互相传值，归纳下值传递原理图如下（图6）：

                                                                                                图6

五、数据流向

 

1.数据流向

我们能够做到前后端分离开发就是因为dva.js框架为我们提供了一套基于redux和redux-saga的数据流方案。其他的框架也基本使用dva.js的这套数据流向，一个React项目一般包含component层（组件层），model层（数据处理层）和servcie层（服务层），在接入服务端接口和拿到UI页面前，我们开发的也主要是model层和service层，只需要拿到接口文档，mock出跟接口返回值相同格式的json数据，就可以在model层进行数据处理，再将数据改造成UI页面需要的格式传入，数据流向如下（图7）。

                                                                                          图7

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，组件通过dispatch函数触发一个action，如果是同步行为会直接通过 reducers 改变 state ，如果是异步行为（副作用）会先触发 effects 然后流向 reducers 最终改变 state，若UI里需要用到model里面的数据，那么就可以用connect将state的数据当做props传递到组件中进而渲染到页面上。

下图解释了如何从一个People组件发起请求，请求获取的数据又是如何经过model层传回到People组件的（图8）。fetchQueryPeople是service层定义的一个方法，用于发axios请求（封装了ajax，详见https://www.kancloud.cn/yunye/axios/234845）。

                                                                                               图8

2.Model层

 

Model层由5部分组成，分别是namespace，state，effects，reducers和subscriptions：

  • namespace：model层的命名空间，dispatch中type:”peole/getPeopleData”中的people就是对应的namespace；

  • state：reducers的初始值，model层的状态数据；

  • reducers：用于处理同步操作，聚合积累的结果是当前model的state对象；

  • effects：用于处理异步操作和业务逻辑，有三个常用函数：put（用来发起一条action），call（以异步方法调用函数），select（用于从state里获取数据，如const people = yield select(status => status.people）

  • subscriptions：从源获取数据，可用于刚进页面发起请求。

概念详述可参考：https://dvajs.com/guide/

六、资料链接

  • 你需要了解的 ES6 语法 : https://www.yuque.com/ant-design/course/byllph

  • 《ES6标准入门》: http://es6.ruanyifeng.com/

  • node.js下载地址：https://nodejs.org/en/download/

  • 淘宝npm镜像地址：http://npm.taobao.org/

  • Ant Design官方文档：https://ant.design/index-cn

  • Axios使用说明：https://www.kancloud.cn/yunye/axios/234845

  • React小书：http://huziketang.mangojuice.top/books/react/

  • Lodash中文文档：http://www.css88.com/doc/lodash/

  • 个人博客：https://blog.csdn.net/GuanJdoJ

以上是 React入门分享 的全部内容， 来源链接： utcz.com/z/381199.html

回到顶部