React 核心基础简介文档
React的核心主要是:
虚拟dom(diff算法,逐层进行比较)
组件化开发,生命周期函数
单向的数据流渲染
事件处理
React中生命周期函数:
React性能调优:
shouldComponentUpdate阶段判断,如果属性及状态与上一次相同,这个时候UI不会变化,也不需要执行后续生成dom,dom diff的过程了,提高性能。
React-router 路由配置:
路由是从上往下匹配的。
(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发送请求:
以上是 React 核心基础简介文档 的全部内容, 来源链接: utcz.com/z/381208.html