react
文章平均质量分 70
姜无忧
莫问前程凶吉,但求落幕无悔
展开
-
redux、react-redux、redux-thunk、redux-saga对比
reduxredux工作流程示意图actions函数形式,返回 action 对象,通常具有type属性。负责指令的生成,页面通过 store.dispatch(action) 向 store 发送数据修改的请求。reducers一个纯函数,接收两个参数 (previousState, action) 第一个表示修改之前的 state 的值,action 是上一步页面通过 store.dispatch(action) 向 store 传递的 action。reducers 通过 ac原创 2022-05-07 13:45:50 · 911 阅读 · 1 评论 -
react中context传递数据
在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式,而不必显式地通过组件树的逐层传递 props。何时使用 Context ?Context 设计目的是为了共享那些对于一个组件树而言是...原创 2019-08-28 17:34:33 · 789 阅读 · 0 评论 -
React 父子组件方法调用及通信
父=>子父组件向子组件传递数据:通过传 props 的方式,向子组件进行传递数据父组件调用子组件的方法:可以给子组件,通过ref起个名字,然后在父组件的点击事件中,通过this.refs.子组件的名字.子组件的方法来实现子=>父子组件调用父组件的方法(传递参数):通过调用父组件的方法时,通过callback回调传递数据。this.props.父组件的方法(传递的数据)...原创 2019-08-27 17:39:05 · 2516 阅读 · 0 评论 -
常用的react生命周期的简单总结
常用的生命周期图示:挂载阶段:constructor => render => componentDidMount => 结束更新阶段:render =>componentDidUpdate => 结束卸载阶段:componentWillUnmount => 结束constructor构造函数用于以下两种情况: 通过给 this.s...原创 2019-08-27 16:58:53 · 1347 阅读 · 1 评论 -
React 性能优化
1,react性能查看工具再讲性能优化之前,我们需要先来了解一下如何查看react加载组件时所耗费的时间的工具,在react 16版本之前我们可以使用React Perf来查看。在最新的React16版本中,我们可以直接在url后加上?react_pref,就可以在chrome浏览器的performance,我们可以查看User Timeing来查看组件的加载时间。2,单个rea...原创 2019-08-26 22:36:55 · 395 阅读 · 0 评论 -
redux+react-redux基本介绍+使用案例(二)
1.创建storesrc/redux/store/index.jsimport { createStore } from 'redux';import reducers from '../reducers';const store = createStore(reducers);export default store;2.创建actionTypessrc/redux/...原创 2019-07-31 23:11:55 · 201 阅读 · 0 评论 -
redux+react-redux基本介绍+使用案例(一)
其实,redux和react并没有半毛钱的关系,redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。1.创建项目create-react-app redux-demo2.安装reduxnpm install redux --S3.安装react-reduxnpm install react-redux --S...原创 2019-07-31 22:57:56 · 557 阅读 · 0 评论 -
react配置postcss-pxtorem
1.通过 eject 命令暴露出react 全部配置npm run eject2.安装npm i postcss-pxtorem -D3.配置 webpack.config.jsrequire('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*']...原创 2019-08-02 15:49:46 · 4179 阅读 · 0 评论 -
react安装即搭建项目
首先,我们需要安装node 和 npm然后:npm install -g create-react-app(cnpm install -g create-react-app)create-react-app my-appcd my-app/npm startmac中,npm install -g create-react-app会出现权限报错。我们可以 sudonpm in...原创 2019-03-30 21:43:04 · 111 阅读 · 0 评论 -
帮你写好简洁JS代码的6条建议
1.使用 Array.includes 来处理多重条件,使代码更优雅https://blog.csdn.net/xiasohuai/article/details/850032252.JavaScript 复杂if...else,switch判断的更优雅写法https://blog.csdn.net/xiasohuai/article/details/856917413. asyn...原创 2019-02-03 17:47:34 · 469 阅读 · 0 评论 -
react简单的路由demo(react-router-dom4.3.1)
效果图:import React from 'react'import ReactDom from 'react-dom'import {BrowserRouter as Router,Route,NavLink,Switch} from 'react-router-dom'import RouterDemoOne from './RouterDemoOne'import R...原创 2018-08-15 21:09:08 · 1069 阅读 · 0 评论 -
react一个简单的小demo
此demo,包含了以下知识点1.React 元素渲染(以及css样式的不同的书写)2.JSX3.React 组件和props(父子组件传值,方法调用)4.React State(状态)5.React 事件处理 效果图:目录介绍:index.jsimport React,{Component} from 'react';import ReactDO...原创 2018-08-15 14:42:53 · 3626 阅读 · 0 评论