React 核心基础简介文档

React的核心主要是:

虚拟dom(diff算法,逐层进行比较)

组件化开发,生命周期函数

单向的数据流渲染

事件处理

React中生命周期函数:

 

React性能调优:

shouldComponentUpdate阶段判断,如果属性及状态与上一次相同,这个时候UI不会变化,也不需要执行后续生成dom,dom diff的过程了,提高性能。

React-router 路由配置:

路由是从上往下匹配的。

扫描二维码关注公众号,回复: 478070 查看本文章

(1) Router相当于一个容器,真正的路由设置要通过Ruote进行配置.

Router里面有一个参数history: 用来监听浏览器地址栏的变化,并将URL解析成一个地址对象,供react-router匹配,然后进入相应的路由。

有三种值:

browserHistory:显示正常的路径,背后调用的是浏览器的history API

hashHistory:路由将通过URL的hash部分切换(#)

CreateMemoryHistory:主要用于服务器的渲染,它创建一个内存中的history对象,不与浏览器URL互动

(2) IndexRoute : 设置默认路由。用在嵌套路由里,而不是放在第一级路由里。设置父路由下默认的的子路由。

嵌套路由:路由里面套路由,父组件里面写固定不动的东西。

url中带冒号,是动态路由

动态路由传递的参数,如果想使用,在子组件中通过this.proxy.params来使用。

(3) 当点击某个按钮或者根据状态判断进入到不同的路由时,这时会用到browserHistory.push(“/”) 相当于跳转到跟路径。

flux:解决非父子组件之间的传值问题。

1. store--> view

flux架构中,dispatcher可以有多个,store也可以有多个。

store的使用:

如果对性能要求高的话,数据能不放在store里面,就不放在store里面

如果对性能要求不高,就把所有的数据都放在store里面,操作数据会很简便,便于管理数据

组件类型:

无状态组件:就是一个函数。

 

组件没有什么逻辑,只返回一个DOM的显示的时候用无状态组件。优点是性能更优。

高阶组件:根据参数的不同,返回不同的组件。

 

redux:flux架构的具体实现。

 

redux设计和使用的三大原则:

store是唯一的,它是单例的;

只有store能改变自身的数据;

reducer:必须是纯函数。

combineReducer:把小的reducer,合并成一个大的reducer。

React-redux:是对redux的一层封装,使用起来更加简便。

UI组件和容器组件的概念。

react-redux中UI组件由用户自己写,容器组件是由react-redux自动生成。(用户只用负责展示,状态管理react-redux底层会自动完成)

这个里面有connect和Provider两个属性。

Connect用于在子组件中连接store,获取数据。里面有两个参数:

Provider使用的时候相当于一个标签,传入一个参数store,使得子组件都可以获取到store中的数据。

react发送请求:

(1) axios发送请求:

先下载axios:yarn add axios

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

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

(2) ajax发送请求:

 

 

 

 

 

 

 

猜你喜欢

转载自blog.csdn.net/wh_xmy/article/details/79761621
今日推荐