liuqiao0327的专栏

Redux 介绍文章目录Redux 介绍一.简介二.Redux 三大原则1.单一数据源2.state是只读的3.使用纯函数来执行修改3.1 纯函数三.Redux的组成1.Action1.1 actionType1.2 action Create2.Reducer2.1 combineReducers()3.Store3.1 createStore()四.React中Redux的使用1.react-redux2.Provider3.connect3.1 mapStateToProps3.2 mapDispa

Flux介绍一.简介Flux与React都是出自于Facebook,Flux的核心思想是利用单向数据流和逻辑单向流来解决MVC架构中状态混乱,数据流管理混乱的问题.二.Flux组成Flux是由3个部分组成:Dispatcher,Store和View.Dispatcher(分发器) 用于分发事件Store(数据仓库) 用于存储应用状态,同时响应事件并更新数据View (视图层) 订阅来自Store的数据渲染页面Flux的核心是单向数据流,运作方式是如下图:也就是:Action-

React Router路由文章目录React Router路由一.介绍二.React-Router的使用1.React 路由库2.安装3.路由组件1.Router组件(路由器组件)2.Route组件(单个路由规则组件)1.path2.match3.Route组件的渲染方式4.exact4.Switch5.Link6.NavLink7.Redirect8. withRouter的使用9.路由懒加载一.介绍react-router是React中用来实现路由的第三方JavaScript库,也是基于Rea

React Hooks详解文章目录React Hooks详解一.Hook简介二.为什么要使用Hook三.使用Hook1.State Hook1.1 useState()1.2 setState()1.3 惰性初始 state2.Effect Hook2.1 useEffect()2.2 使用useEffect的问题1.为什么要在 effect 中返回一个函数?2.React 何时清除 effect3.effect 中的是否必须要返回?4.组件中可以包含多个useEffect5.通过传入useEffect的

React Context(上下文)文章目录React Context(上下文)一.初始Context二.作用三.使用Context1.React.createContext2.Provider3.Consumer4.Class.contextType5.Context.displayName6.注意事项四,应用场景1.主题切换2.获取当前认证的用户3.React-router使用context4.React-redux使用contxt5.跨层级组件传参五.缺点一.初始ContextContext

React 生命周期文章目录React 生命周期一.简介二.React 16版本的生命周期1.组件的挂载`1.constructor()``2.static getDerivedStateFromProps(props,state)``3.render()``4.componentDidMount()`2.组件的数据更新阶段`1.static getDerivedStateFromProps(props,state)``2.shouldComponentUpdate(nextProps, nextStat

React 高阶组件(HOC)文章目录React 高阶组件(HOC)一.概念二.作用三.高阶组件的实现1.属性代理（Props Proxy）1.1 通过refs获取组件实例(不推荐)1.2 抽象state1.3 操作props1.4 基础组件和其他元素组合2.反向继承1.操作State2.渲染劫持四.高阶组件在项目中的运用1.进行权限的判断2.日志记录3.数据校验4.异常处理五.总结一.概念高阶组件是一个纯函数,也是容器组件.是参数为组件,返回值为新组件的函数.HOC 不会修改传入的组件，也不会

React 组件通信方式文章目录React 组件通信方式一.前言二.组件通信1.父组件通信子组件2.子组件通信父组件3.context跨级组件通信(生产-消费者模式)4.非父子组件通信(发布订阅模式)5.状态提升(中间人模式)6.ref标记实现通信三.总结1.父通子,子通父2.非父子组件通信,跨级深3.兄弟通信一.前言React应用是由组件堆积的形式而成的,组件之间相互独立,但是可以相互通信的,React组件的数据是单向数据流的二.组件通信1.父组件通信子组件父组件要通信子组件是很简单的,

React 组件文章目录React 组件一.声明组件1.ES5写法:React.createClass()2.ES6写法:React.Component3.函数式组件二.组件注意事项1.组件名首字母大写2.一个根元素3.return需要加上小括号4.组件是可以嵌套的三.状态(state)1.定义state2.访问state3.改变state1.方法一2.方法二3.方法三4.多个改变satae操作情况5.setState异步6.setState同步四.事件绑定1.匿名箭头函数写法2.自定义函数写法3.自定义

JSX语法简介一.简介它是由React官方推出的一种基于JavaScript的拓展语法,可以在JavaScript中编写更像XML写法的代码,虽然不是使用React编写代码的必要条件,但是官方推荐,因为它更直观,更搞笑的可读性.需要注意的是,它不能在浏览器中执行,需要经过转换器将JSX语法转为JS之后才可以.二.语法1.优点要使用一个东西,我们需要知道它有什么优点,能给我们带来什么?JSX执行更快,因为它在编译为JavaScript代码后进行了优化它是类型安全的,在编译过程中就能发现错误

React 使用方式文章目录React 使用方式一.cdn 链接的方式1.挂载点2.引入所需要的包3.写React代码4.扩展CDN二.基于webpack搭建配置环境1.前期的必要配置1.安装相关插件1.初始化2.安装webpack以及支持热更新3.安装react相关4.安装babel相关5.安装打包相关插件6.创建webpack.config.js7.创建babel配置文件(babelrc)8.src文件夹放源代码9.public文件夹 放静态资源文件2.配置webpack.config.js2.使用R