摘要:概述这一章终于大集成了集成源码效果说明集成主要是用到库集成源码效果说明主要用到库,是针对库在环境下的封装组件,注入等属性接管跟组件指定路由和组件的对应关系集成源码引入相关的包和链接组件效果说明主要用到库都是用的接
0x000 概述
这一章终于大集成了
0x001 集成react
源码
import React from "react" import ReactDom from "react-dom" class App extends React.Component { render() { return (react) } } ReactDom.render(, document.getElementById("app") )
效果
说明:
集成react主要是用到react、react-router库
0X002 集成react-router
源码
import React from "react" import ReactDom from "react-dom" import {BrowserRouter, Route, withRouter} from "react-router-dom" class Article extends React.Component { render() { return (article
) } } let MyArticle = withRouter(Article) class App extends React.Component { render() { return () } } let MyApp = withRouter(App) ReactDom.render(, document.getElementById("app") )
效果
说明
主要用到react-router-dom库,是针对react-router库在dom环境下的封装
withRouter组件,注入match、location、history等属性
BrowserRouter接管跟组件
Route指定路由和组件的对应关系
0x003 集成redux
源码
引入redux相关的包
import {Provider, connect} from "react-redux" import {createStore} from "redux"
reducer
const counter = (state = {counter: 0, num: 0}, action) => { switch (action.type) { case ACTION_INCREMENT: return {...state, ...{counter: ++state.counter}} case ACTION_DECREMENT: return {...state, ...{counter: --state.counter}} default: return state } }
action和actionCreators
// action const ACTION_INCREMENT = "INCREMENT" const ACTION_DECREMENT = "DECREMENT" // action creator const increment = () => ({ type: ACTION_INCREMENT }) const decrement = () => ({ type: ACTION_DECREMENT })
链接组件
// store const store = createStore(counter) class Article extends React.Component { render() { return ({this.props.counter}
) } } let MyArticle = withRouter(connect((state) => { return { counter: state.counter } })(Article)) class App extends React.Component { render() { return () } } let MyApp = withRouter(connect(() => ({}), (dispatch) => { return { increment: () => dispatch(increment()), decrement: () => dispatch(decrement()) } })(App)) ReactDom.render(, document.getElementById("app") )
效果
说明
主要用到redux、react-redux库
reducer、action、actionCreators都是redux用的
Provider接管BrowserRouter,并注入store
connect连接组件和store,为组件注入reducer
0x005 总结每一步都搞懂,下一步才能更明确。
0x006 资源源码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98216.html
摘要:序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章 从项目中由浅入深的学习vue,微信小程序...
摘要:更多相关介绍请看这特点仅仅只是虚拟最大限度减少与的交互类似于使用操作单向数据流很大程度减少了重复代码的使用组件化可组合一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。在使用后,就变得很容易维护,而且数据流非常清晰,容易解决遇到的。 欢迎移步我的博客阅读:《React 入门实践》 在写这篇文章之前,我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项...
摘要:而函数式编程就不一样了,这是模仿我们人类的思维方式发明出来的。数据流在中,数据的流动是单向的,即从父节点传递到子节点。数据流严格的单向数据流是架构的设计核心。 前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。 代码地址:Re...
摘要:下面会从浅到深,淡淡在阅读源码过程中自己的理解。分拆子页面后,每一个子页面对应一个文件。总结上面就是最早版本的源码,很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址 dva的思想还是很不错的,大大提升了开发效率,dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...
摘要:下面会从浅到深,淡淡在阅读源码过程中自己的理解。分拆子页面后,每一个子页面对应一个文件。总结上面就是最早版本的源码,很简洁的使用了等其目的也很简单简化相关生态的繁琐逻辑参考源码地址 dva的思想还是很不错的,大大提升了开发效率,dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中...
阅读 2568·2021-11-17 17:00
阅读 1751·2021-10-11 10:57
阅读 3640·2021-09-09 11:33
阅读 880·2021-09-09 09:33
阅读 3492·2019-08-30 14:20
阅读 3287·2019-08-29 11:25
阅读 2769·2019-08-26 13:48
阅读 694·2019-08-26 11:52