Cool的博客

为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件.1. 状态管理Redux JavaScript 状态容器，提供可预测化的状态管理 MobX 通过函数响应式编程使得状态管理变得简单和可扩展 Redux Thunk Redux的异步处理中间件 Redux Saga Redux中间件,用于管理应用程序 Side Effect(副作用，例如异步获取数据，访问浏览器缓存等) Dva 一个基于 redux 和 redux-saga 的数据流方

这一节，我们将会根据上一节的React轮播图这个组件，大概说一下React组件的生命周期。我跟大家说的生命周期可能跟网上其他内容不太一样，因为我将写几个最常用的，也算作是入门级的周期，这几个周期将会在你写组件中特别常用，不常用的你可以去其他地方查看，并且尝试。为什么我不写大而全的周期内容呢，因为我坚信，如果你把这几个最常用的熟悉了，入门了，那么其他的隐晦的内容你将手到擒来，甚至是做为自己深入学习的...

这一节我们简单说一下首页添加热门项目，其实热门项目往往就是一个项目，或者是热门的，这个项目热门不热门其实跟我们前端没有关系，我们调用后台接口，传了该传的数据，自然热门项目就出来了，言外之意就是热门不热门，跟我们前端没有关系，我们只是发请求，显数据。这一小节的代码内容会和第四小节差不多，但说这一小节是有必要的，因为有项目列表，就会涉及到项目详情页。而React更适合做单页应用，所以其他页面就需要...

本来这一节是想按着顺序，从前面的react首页结束，开始说React-router这一节的，但我觉得很又必要大概说一下，我们为什么要使用前端路由，关于前端路由我们所能想到的一些知识点。1、先说说后端路由说起前端路由，我们肯定会想到后端路由，我们以前经常看见访问一个网址，大概路径是这个样子的，比如：www.xx.com/indexwww.xx.com/index.dowww.xx...

一定有很多小伙伴比较关心前端路由router这个东西，以为之前我们一直在用项目路由，甚至每一个html就要用一个路由。而没有接触过前端路由的小伙伴又不知道该从何入手。这一小节，我们继续前面的代码，开始添加react-router。通过在cmd小黑窗找到之的项目地址，然后 npm start 命令启动React项目。1、这一节我们要说的是路由，所有就涉及到页面跳转，如图： 在页面...

react-router打包后无法通过路由进入到页面，是因为当我们使用react-router-dom里的BrowserRouter as Router时，是用浏览器history对象的方法去请求服务器，如果服务器没有相对于的路由去指向对应的页面路由会找不到资源。BrowserRouter会变成类似这样的路径  http://111.230.139.105:3001/detail/9459...

map文件是帮助我们查看报错的位置的。 map文件由devtool属性控制，如果不想要map，注释掉就可以，大约webpack.config.prod.js第57行；   

react-redux使用小结 react-redux store reducer action 整合storereduceraction 补充 使用redux-dev-tools 让改变reducer后能够即时刷新页面 总结  需要使用的库redux，react-redux，react-router-reduxreact-redux使用一...

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(t...

随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：React.PropTypes 提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。 1、声明props为指定的JS基本类型，可传可不传。1) React.PropTypes.ar...

状态、属性、组件API、组件的生命周期当react的状态改变时，自动执行this.render()方法更新组件ES6写React的时候，事件里不会自动绑定this，需要自己绑定，或者直接在constructor里写方法constructor(props) { super(props); this.state = { liked: false };...

这一节，我们来看一个banner图轮播，banner图轮播是一个比较常用的需求，而且几乎每个网站，每个app都会有一个banner图轮播的效果，也不知道是谁创造出来的。1、banner图一般都是从文件服务器获取的，也就是需要发请求获取数据，需要发ajax请求，这里我们需要使用jquery，当然，你也可以写个原生的HTTPRequest那个原生写法。继续打开小黑窗，输入npm install...

这一节，我们将创建APP顶部通用的标题栏。这个东西项目中也很常用的，什么？你想不到什么是顶部通用标题栏，我给你找几个图片：就是这个东西。react所有的我们所看到的每一块东西，我们都应该以模块的思路来做。1、css内容以后我们将不再给大家截图怎么写，因为都学到react了，我就觉得你css怎么也使用了至少有一两年了吧，哪怕是半年，写个background，color ，font-siz...

背景React15react核心思想：内存中维护一颗虚拟DOM树，数据变化时（setState），自动更新虚拟DOM，得到一颗新树，然后diff新老虚拟DOM树，找到有变化的部分，得到一个change(patch)，将这个patch加入队列，最终批量更新这些path到DOM中。简单说就是：diff + patch。react 执行render()和setState()进行渲染时主要有两...

官网：https://umijs.org/zh/guide/#%E7%89%B9%E6%80%A7

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？——拥有了Hooks，生命周期钩子函数可以先丢一边了。你在还在为组件中的this指向而晕头转向吗？——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对t...

这篇文章没有对错之分，肯定也有不完善的地方，结合了自己日常开发和经验。可以让你书写代码更具严谨性,希望看完之后有所帮助。本文字数4000+ ，看完本文大概需半小时。1. 注释(1) 文件顶部的注释，包括描述、作者、日期/** * @description xxxxxx * @author chengfeng * @since 19/05/21 */复制代码(2) 模...

“大家好，我是谷阿莫，今天要将的是一个...”，哈哈哈，看到这个题我就想到这个开头。最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。所以我们有必要了解 Hooks，以及由此引发的疑问。React Hooks相关推荐30分钟精通React今年最劲爆的新特性——React Hooks 从Mixin到hook...

官网：https://ant.design/index-cn

这个项目的结构使用的是fractal(不规则碎片形：适合大型项目)*完美使用 React, Redux, and React-Router！超好用的脚手架。github:https://github.com/bodyno/react-starter-kit...

【React深入】setState的执行机制一.几个开发中经常会遇到的问题以下几个问题是我们在实际开发中经常会遇到的场景，下面用几个简单的示例代码来还原一下。1.setState是同步还是异步的，为什么有的时候不能立即拿到更新结果而有的时候可以?1.1 钩子函数和React合成事件中的setState现在有两个组件 componentDidMount() { console.l...

 Facebook 官方推出Create-React-App脚手架，基本可以零配置搭建基于webpack的React开发环境，内置了热更新等功能。详细文档可前往链接：Create-React-App文档本文将介绍使用Create-React-App脚手架搭建antd-mobile的开发环境。快速开始：npm install -g create-react-app     ...

上一节，我们把从官网下载下来的React demo 启动起来了，但很多小伙伴碰到react还是感到很懵，不知从何下手，没事冒出个app.js，到底干嘛用的。刚下载下来的demo也不符合我们的真是项目开发思路，总之一句话，很狗屎。这一节，我来将demo的目录结构改变一下，然后做出一个简单的hello world实例，同时包含样式引用。安装完以后，在小黑窗输入npm start 会自动在浏览器弹出...

生命周期顺序 constructor() componentWillMount()   ---------- 渲染前执行 render() componentDidMount()   ------------渲染后执行

找到webpack.config.prod.js在loaders增加 { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')},   

   谈及React时，就会想到一个很重要的思想，就是组件化思想。它将可以重用的部分进行组件化开发，形成一个个相对独立的组件，那么组件化后，你也会提出些疑问，组件与组件之间，将怎样进行信息的传递呢?下面来介绍下组件之间传递信息的方法。     组件之间传递信息方式，总体可分为以下5种：1.（父组件）向（子组件）传递信息2.（父组件）向更深层的（子组件） 进行传递信息  >&g...

React与ES6系列： 1. React与ES6（一）开篇介绍 2. React和ES6（二）ES6的类和ES7的property initializer 3. React与ES6（三）ES6类和方法绑定 4. React与ES6（四）ES6如何处理React mixins在使用React.createClass()的时候你也许使用过一个所谓的mixin的东西。使用它，你可以给Rea...

使用React来构建web应用，每个页面都将是多个组件组成，并且相互嵌套来构成的，接下来就学习下组件的嵌套。一、组件嵌套：背景交代： 1、创建一个html，包含引用的相关js、需要被渲染的div； 2、创建一个有label与input标签组成的简单组件 — IvanInput，并可以通过传入数组来渲染多组label与input标签，拥有不同的label名称、inputType、inp...

前言本文不会拿redux、react-redux等一些react的名词去讲解，然后把各自用法举例说明，这样其实对一些react新手或者不太熟悉redux模式的开发人员不够友好，他们并不知道这样使用的原因。本文通过一个简单的例子展开，一点点自己去实现一个redux+react-redux，让大家充分理解redux+react-redux出现的必要。预备知识在阅读本文之前，希望大家对以下知...

1.IntervalEnhance.js定义高阶组件// 高阶组件// 主要用于替代旧的mixinsimport React from 'react';//1.还记得箭头函数吗？没错，这就是一个箭头函数。这个函数接受一个组件为输入参数，返回一个类。//ComposedComponent就是输入参数，也就是需要包装增强的组件。//export var IntervalEnhan...

1.router.js定义路由import React from "react";import {BrowserRouter as Router,Route,Redirect,Switch} from 'react-router-dom';// 1.引入组件import App from './pages/App/app.js';import Index from './page...

1.config.js配置数据请求路径和一些公共变量// 定义常量及api接口地址export const access_token = ''export const platform = ''let env = 'develop'//开发环境、测试环境、生产环境if(window.location.hostname == 'localhost'){ env = 'devel...

redux相当于vue中的vuex。1.安装依赖cnpm i redux --savecnpm i react-redux --save2.reducer.js 主要传入state和actionconst themeReducer = (state, action) => { if (!state) return { themeColor: 'red...

1.Reducer1（themeColor.js）// reducer 优化后================// 建议使用这中结构// 1.定义默认数据let initialState = { themeColor: 'red'}// 2.Reducerconst themeReducer = (state = initialState, action) =>...

之前写react的时候发现被react-redux的connect包裹的子组件取不到this.props.history这个对象，可是我又的确需要这个对象怎么办？ 解决办法也很简单，首先你需要这个import PropTypes from 'prop-types'然后 你的组件.contextTypes = { router: PropTypes.object.is...

万恶的根源距离React Router v4 正式发布也已经过去三个月了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正好“尝尝鲜”...江湖传言，目前官方同时维护 2.x 和 4.x 两个版本。（ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信机智如我的你也会发现，ReactRouter v3 去哪儿了？整丢了？？巴拉出锅了？？？敢不敢给我个完美的解释！...

React-router新手入门关于react-router的解释。声明：本人也是一个新手，此篇文章只是作为一个参考，纯粹给大家作为一种借鉴参考，若有错误，可评论指出，谢谢。此文参考前端先生的文章！ 首先：    在使用react-router的时候截止目前应该使用router3.0以上的版本，推荐目前使用3.0因为3.0和之前的2.0改动较小，而4.0据说改动很大。如果使...

安装create-react-appnpm install -g create-react-app创建项目create-react-app reactreduxrouterdemocd reactreduxrouterdemo安装第三方模块npm install --save reduxnpm install --save react-reduxnpm install --save react-r...

1.在src中新建redux文件夹2.npm下载redux和react-redux库 import { createStore } from 'redux';import { Provider, connect } from 'react-redux';使用this.props获取传人数据  render() { const {text, onChange...

 作者：zhenhua-lee链接：https://www.zhihu.com/question/51831855/answer/225446217来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。框架: dva是个框架，集成了redux、redux-saga、react-router-redux、react-router 快速初始化: 可以快速实现项目...