react

react所有的生命周期函数,render函数一定要有。

一、项目准备

此次项目是基于react的单页应用,所以需要用到脚手架工具create-react-app来快速搭建一个开发环境。

npm install -g create-react-app

create-react-app my-app

cd my-app

npm run start

这样,就可以自动在浏览打开一个端口号为3000的服务,显示欢迎页面。

二、项目中用到的技术及主要模块

本次项目是组件化开发的。页面的话主要分为主页面,列表页,详情页。公有部分,在每个页面中都有,所以,在项目目录中单独开辟一个空间。在app/components目录下开发公共部分。页面在app/pages目录下进行开发。

● 组件之间的跳转需要用到路由,这里用的是前端路由(react-router),而app.js是入口文件,所以这里将路由写在app.js中,引入路 由,引入react。配置路由项(默认路由,子路由,嵌套路由,动态路由),每个路径对应不同的组件,所以需要引入不同的组件。

● 公共部分的某些数据需要动态获取,所以需要现在本地模拟数据(mock),然后用fiddler正向代理。具体步骤具体分析。在组件中需要发送一个ajax请求,获取数据,将获取到的数据放到state中,进行页面中数据的更新。state是在构造函数constructor中定义的,修改的话,是用setState修改的,而且是异步的。在页面中将获取到的数据,进行遍历,循环输出在页面中,有链接的带上链接。

● 主页面的内容基本上是固定的,为了防止每次回到页面都发送ajax请求,所以将首页的数据存到store中,这里用到的是react-redux。所以需要在app.js中引入’react-redux‘中的provider,将store分发给各个组件。在主页面的组件中引入’react-redux‘中的connect,让组件与store进行连接。

          ○ 组件中的数据,想放到store中,需要先ajax动态获取,然后再创建action,调用dispatch()方法,将action传给reducer,reducer中返回新的数据,在组件中接收到数据,循环显示在页面中。

          ○ 轮播图(swipper) 全局引用swiper.css,在swiper组件中引入swiper.js。render函数中返回页面渲染的内容。

          ○ echarts 在node环境中安装echarts,在组件中引入echarts模块,初始化一个echarts实例。在官网中查找自己需要用到的图表,将options引入过来,添上数据,调用setOption(),在页面上展示信息。

          ○ 下拉刷新 引入iscroll-probe.js文件,对应Dom需要固定的高度。利用iscroll中自带方法监听scroll和scroll事件,以此来作为判断条件,进行数据重新加载。选择js文件的时候有坑。

          ○ canvas 调用canvas中的各种方法进行绘图。

● 每个id对应着不同的内容,所以详情页的内容可以通过id 动态获取。同样也是将ajax获取到的数据放到store,与主页面中数据的操作类似。

                 ○ 右侧固定 当页面滚动时,让右侧固定一个地方。这里用到了window来监听滚动条的变化,当组件销毁时需要解绑,不然会报错。this指向问题是一个坑。

                 ○ 音频,视频播放 需要用到HTML5中添加的audio和video标签,以及js中定义的一些方法,属性和事件。

● 列表页,主要展示了某一类型的数据信息。通过id获取后台数据,将数据展示在页面中。具体的一些操作与主页面也是类似的。

至此,整个项目的开发过程算是完成了。但是需要与后端进行联调,并将项目打包上线。联调涉及到跨域的问题,我们需要在package.json中配置反向代理(因为webpack已经配置好了反向代理,这里只需简单配置即可)。

三、项目打包,与后端合并

1.执行yarn reject命令,手动配置webpack项,将css样式也进行模块化开发,共有的样式可以不按模块分配。将开发环境与生产环境都进行修改。

2.执行yarn build将项目打包,打包后的文件在build目录下,将目录下的文件复制到后端项目的public目录下,这时,重新开启一个后端服务器,就可以看见页面了。

四、react-redux的了解

        provider:接收一个参数store,使store能够在每一个组件中被连接;

        connect:在子组件中被调用,他的第二个括号里面接受的是子组件:

              (1) 第一个括号里面接收两个参数:(mapStateToProps, mapdispatchToProps)

                                  mapstateToProps:把store里面的数据按照规则映射到props里。

                                  mapdispatchToProps:把这里的函数里的一些函数映射props里。经过这样一个操作,子组件变成了一个ui组件,而connect返回了最终的容器组件。

              (2) 最后一个括号之所以写子组件的名字,是因为让子组件和store做链接;

五、react-redux整个代码实现过程

  •  先下载:yarn add react-redux
  •  将输入框和内容拆分为两个组件:input.js list.js,在app.js中引入这两个组件;
  •  创建store.js;
  •  创建reducer;
  • 在app.js中引入store,引入provider(从react-redux中);

provider把store传递给每一个组件。在根组件中外层嵌套一个Provider,这样每一个子组件可以获取到store。

react_第1张图片

  • 子组件 list.js 通过引入connect方法,让子组件连接store。在list.js中定义mapStateToProps方法:把store中的items映射给props中的items,通过this.props.items获取store中的items.

react_第2张图片

  • 在input.js中绑定keyup事件。引入connect和store做连接,把handlekeyup映射到props里,调用dispatch,映射到props中,list组件变成了一个ui组件,通过connect方法返回一个容器组件。

react_第3张图片

 

redux建议我们把所有的数据都存放在store里( 容易管理 ),不管数据共享还是不共享。

父组件引入Item子组件,然后通过属性的方法向子组件传值:

react_第4张图片

子组件通过 this.props.value 接收到父组件传递过来的值:

react_第5张图片

 

在react中子组件向父组件传递参数不能用事件的方式。要通过调用父组件传递过来的方法。

父组件向子组件传递方法:

子组件通过调用父组件传过来的方法:

react_第6张图片

 

react中的数据都存放在state中,当state发生改变的时候或者当props发生改变的时候,render函数就会重新执行。

  • state中存放的是和页面相关的数据,数据发生改变,state会重新执行。
  • 要想改变state中的数据必须调用setstate()方法。
  • setstate()方法是异步的,里面的程序会同时执行。同时setstate不仅可以存放对象,还可以存放一个函数。(箭头函数,返回一个对象

六、在react代码中怎么提高页面性能

(1) react中的事件绑定:(是通过事件委托的方式绑定事件的)表面上是绑定在该元素上,通过编译转化为es5的代码,通过事件代理的方式把事件统一绑定在根元素上。这样可以达到性能优化的目的。事件代理,动态增加的元素,不用再绑定事件。

(2) 函数作用域的绑定要放在constructor里面写,这样的话,每一个传递给子组件的方法的引用是固定的,子组件就不会因为这个方法而重新渲染页面,提高性能。

每一次执行render函数的时候,bind也会返回一个新的方法,每次执行都会返回一个全新的函数。当调用bind(this)的时候,调用旧的函数结合作用域,返回一个新的函数,两次执行render函数,执行的两个函数是不相等的。子组件接收proxy,会重新渲染页面,会消耗性能,使子组件做无谓的渲染

当数据发生改变的时候,父组件中的render函数会重新执行,绑定的方法会传给子组件,子组件接收到方法,发现跟之前的方法是一样的,然后就不重新渲染页面了,减少一次页面渲染的次数,提高新能。

react_第7张图片

reactDOM.render()反复执行,会重新渲染页面。

七、propsType

    propsType的作用:

(1) 用来帮助对接收的属性值进行校验,约束传递数据的内容类型,校验父组件传递给子组件的值的类型;

react_第8张图片

 

(2) 设置父组件传递过来属性的默认值。

react_第9张图片

    propsType的使用:

  • 使用fiddler里面的host可以配置域名。
  • 使用fiddler里面的autoResponder可以帮助我们实现本地数据的模拟。

八、组件

react中的组件都是一个class。

判断页面是前端渲染的还是后端拍出来的:查看源代码,源代码中没有的内容,就是前端渲染的,源代码中有的内容就是后端拍出来的。

状态:组件自己的数据都放在list.state中。

react_第10张图片

es5中建立组件:

react_第11张图片

es6建立组件:

和页面展示毫无关系的数据,不放在state里面。state里面只存放和页面有关的数据。否则数据一改变,render函数会重新执行,页面会重新渲染,降低性能。

改变state,必须调用setState()方法,才能改变state中的数据。

axios不支持IE浏览器,要使用axios的第三方模块实现兼容

在react发送请求:

(1) axios发送请求:(和在vue中使用的方法一样)在netwok中type值为:xhr。【https://github.com/axios/axios

// 先下载axios
yarn add axios

// 然后引入axios
import axios from ''axios"

发送的请求写在componentDidMount()生命周期函数里面。

react_第12张图片

(2) 使用fetch发送请求:【https://github.com/github/fetch】在netwok中type值为:fetch。

// 先下载
npm install whatwg-fetch --save yarn add whatwg-fetch

// 引入
import 'whatwg-fetch'

react_第13张图片

 

react中css模块化

到react项目目录中执行命令: yarn eject

react_第14张图片

然后在该目录下面会增加一个config文件夹,在该文件夹下 :

webpack.config.dev.js:webpack本地打包的配置文件。在该文件下搜索css找到:

react_第15张图片

然后引入css样式:import style from './style.css';className要修改为:

react_第16张图片

问题

(1) 当在config中设置module:true时,该组件中的样式就形成了一个局部样式,只能供该组件的元素使用。然后设置的swiper就出了问题。

解决办法:

在config中设置时,在webpack.config.dev.js文件中搜索css,在module中找到css配置文件的那一部分,粘贴一份,将css改为mcss,并在mcss中的css-loader下的options中添加一个module:true。作用是当发现是mcss文件时,将其变成一个局部的样式,当找到css样式时,就是全局样式。module:true的作用就是将组件中的样式变为局部样式。只在该组件内使用。

 

按需加载:https://www.cnblogs.com/focuslgy/p/4270946.html

1. webpack 按需加载:【https://www.cnblogs.com/libin-1/p/6537936.html

  • webpack按需异步加载。【代码拆分,css文件单独打包 】
  • 利用webpack中的code spitting特性,将各个步骤的代码进行拆分,实现按需加载。

2. vue-router 按需加载:【http://blog.csdn.net/xiejiashu/article/details/78018234?locationNum=10&fps=1

为了让页面更快的加载完成,第一时间提供给用户。也为了帮助客户端节省流量资源,我们可以启动vue-router

访问首页的时候按需加载:

(1) 图片按需加载:

将图片的真实资源地址存放在标签自定义的属性里面,如data-src,那么src属性就用一张透明的图片占用(1k左右),当触发动作时,交换属性,就可以达到按需加载。常见的交互效果是图片滚动按需加载。

(2) 内容按需加载:

(1) 利用textarea标签将你需要加载的html结构全放在标签里面,这样页面解析的时候会忽略他们。当触发的时候,将textarea的value赋值给父元素的innerHTML,就达到了按需加载。

(2) script标签的type="text/html"也可以,常常用作当js代码片段模板处理,如弹出框。

(3) 调用程序生成的ajax接口,通过触发动作往页面中添加内容。如瀑布流,点击加载更多,链接,通过滚动触发,请求ajax接口,加载更多图片资源。.

 

 

 

你可能感兴趣的:(前端基础学习,学习笔记,react)