ISaiSai的专栏

import queryString from 'query-string';fetch 参数如下, 1.需要设置content-type application/x-www-form-urlencoded 2.body 进行param 转化为a=1&b=2 的形式 则提交到服务端的内容与post内容相同 headers: { "Content-Type":

点击加减按钮，延迟1秒操作加减动作（模拟异步网络请求） 最终调用Action “Done” 将结果展示import React from 'react'import ReactDOM from 'react-dom'import {createStore, applyMiddleware} from 'redux'import {Provider, connect} from 'react-

参考文档：https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates异常现象点击Link url 变化但是页面不更新 出现此问题的条件： 1.使用了react-reduct 的connect 2.Router与Root 之间有 有layout布局 元素 解决办法：withRoute

最简单的一个react-redux 示例，实现点击加一的计数器import React from 'react'import ReactDOM from 'react-dom'import {createStore} from 'redux'import {Provider, connect} from 'react-redux'function reducers(state = 1, act

Objects are not valid as a React child (found: object with keys {value, onChange}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)

目的： 1.提高react render效率（shouldComponentUpdate 比较 imutable的前后两个props， 减少render次数，缩短生命周期,在） 2.所有数据都是一份新的，减少出错概率文档:http://facebook.github.io/immutable-js/ 安装 npm install immutable基本创建及读取const {Map,

参考文档https://github.com/airbnb/enzyme/issues/341 http://www.ruanyifeng.com/blog/2016/02/react-testing-tutorial.html1.引入enzyme 的mount 2.引入jsdom 3.调用simulate 模拟操作 4.断言结果是否是预期import {mount} from 'en

1.引入react-addons-test-utils 2.引入断言器 chai 3.安装mocha 4.运行测试(mocha –compilers js:babel-core/register ) 需要配置mocha 支持es6及jsx,mocha 自动执行test文件夹下的所有测试用例babel配置{ "presets": [ "es2015",'react' ]} 参考文档：

参考文档：http://www.zhoulujun.cn/zhoulujun/html/tools/webpack/2016_0809_7876.htmlwebpack dev server 默认只能localhost 本机访问，如果希望局域网内其它机器访问进行测试 需要修改 添加 –host 0.0.0.0 参数webpack-dev-server --host 0.0.0.0

最新版本 react-router-redux 5.0 路由DEMO使用了 redux-react,react-saga,react-router,react-router-redux 实现了路由跳转（react-router-redux）、异步数据操作（saga） import React, {Component} from 'react'import ReactDOM from 'rea

使用BrowserHistory 的时候，由于是新地址，webpack webpack-dev-server 无法进行导航，只能404 ，可以通过设置webpack.config.js 中的devServer，设置如下 devServer: { historyApiFallback:{ index:'src/index.html' },

import 必须在其它所有业务代码前面（eslint 暴出）

jquery.param({a:1,b:2}) 会生成a=1&b=2 如果需要npm 版本的可以引入query-string,实现相同的功能 https://github.com/sindresorhus/query-stringimport queryString from 'query-string';const stringified = queryString.stringify

rm -rf node_modules npm install删除node_module,重新安装问题解决 原因不明

参考文件 https://draftjs.org/docs/advanced-topics-block-components.html#content步骤： 1.定义各一个自己的react 组件 2.Editor 上添加一个 属性 blockRendererFn={myBlockRenderer} ， 3.在自定义 myBlockRenderer 函数中，编写业务逻辑，确认什么样的实体或者

升级参考文档： https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed最大的改动是 原来的 loaders 改成了rules 并且loader必须添加“-loader” 后缀原来的（webpack 已支持moudles） presets: [‘es2015’] 修

webpack 升级后，extensions 数组中不能使用空字符串，需要使用* 代替。 否则报错Getting error: configuration.resolve.extensions[0] should not be empty 参考文档：https://github.com/webpack/webpack/issues/3043I am not sure that this i

在module rules 中的less-loader 下配置options modifyVars。 实现 更改less 中的变量{ test: /\.less/, use: [ { loader: "style-loader"

react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。 无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息import {withRouter} from 're

参考文档：https://facebook.github.io/react/docs/react-api.html#cloneelementimport React,{Component} from 'react';import ReactDOM from 'react-dom';import Perf from 'react-addons-perf' // ES6class MyConta

参考文档：https://facebook.github.io/react/docs/perf.html1.安装并引入 npm install react-addons-perf import Perf from ‘react-addons-perf’2.监控 Perf.start()xxxx页面代码逻辑 Perf.stop()3.打印结果 // 获取监控结果 var

思路：由于路由自上而下匹配，处理404只需在最后一个打底路由进行处理如果希望保持url不变，在路由的最后一行添加如下 * 代码 <Route path="*" component={NotFoundPage} />如果要变url,则在所有路由的最后添加如下代码，使用Redirect （需要 import Redirectimport { Router, Route, Redirect } from

页面会报告已经警告Warning: `valueLink` prop on `input` is deprecated; set `value` and `onChange` instead.Note: LinkedStateMixin is deprecated as of React v15. The recommendation is to explicitly set the value a

参考文档：https://facebook.github.io/react/docs/react-component.html#setstatesetState 第一个参数是要改变的state对象 第二个参数是 state 导致的页面变化完成后的回调，等价于componentDidUpdate

import React from 'react';var ReactDOM = require('react-dom'); var HelloWorldMixin = { sayHello: function () { return "hello world!" }};var HelloWorld = React.createClass({ mixins

Decorators帮助实现编辑器中非常复杂的样式，对一些元素进行封装CompositeDecorator复合装饰器 针对内容文本的装饰器，当找到匹配的文本时，使用组件对其进行包装绘制创建Decorators 需要制定两个属性，一是如何找到（strategy） 二是找到后用什么组件渲染（component） const decorator = new CompositeDecorator

entities 是draft.js 抽象出来的基本粒子，我们常用到的@某人、链接及嵌入的其它元素都可以抽象为实体 一个entities 包含 1. type 自己定义的字符串 唯一标识这个实体 2. mutability 标识实体在用户编辑的时候展现出来的特性，分为 Immutable 不可变：有原子性，增、删、改一个地方则全部删除 Mutable 可变：例如链接，

https://facebook.github.io/draft-js/docs/quickstart-rich-styling.html#content上一节创建了双向绑定的draft.js 的编辑器基础，这一节将创建一个简单的富文本编辑器。（通过键盘快捷键和按钮两种方式，实现最简单的加粗功能）主要用到了RichUtils 的toggleInlineStyle和handleKeyCommand两

RICH TEXT EDITOR FRAMEWORK FOR REACT 基于reac的富文本编辑器框架 Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. dr

安装：(draft.js 依赖react， 因此需要同时安装react) install –save draft-js react react-dom draft.js 的顶层API 模拟了Input ，包含editorState(对应input 的value，包含了编辑器的所有属性，包括内容、鼠标cursor、编辑历史等) 和onChange 两个属性，实现了双向的绑定import Reac

<input type="text" autoFocus />运行起来后 input 获得焦点

安装： npm install classnames功能： 将true的class 显示出来，false 的隐藏 参考文档：https://manofhustle.com/2015/01/19/dynamically-add-classes-react-classset/demo:var classNames = require('classnames');var HelloWorld

如下代码是reflux 的骨架import React from 'react';import Reflux from 'reflux'var ReactDOM = require('react-dom');var mainAction = Reflux.createActions([ 'sayHello']);var mainStore = Reflux.createStore(

stateless function component 在 0.14 版本中提供，适用于没有state ，输出内容的变化仅仅依赖于输入的propsthat has no state and returns the same markup given the same propsconst Hehe= (props) => <p>hehe</p>;

如果服务端在接口上已经对html进行了转义，并且可以完全信任服务端的接口数据，可以使用dangerouslySetInnerHTMLvar test = "“test”<div>hehe</div>";<div dangerouslySetInnerHTML={{__html:test}}></div>

componentDidMount() { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave ) } routerWillLeave(nextLocation) { return '确认要离

原始代码： import React from 'react';import './B.less' ;export default (props) => { function handleClick() { props.onChange("abc"); } return <div className="myFirst" onClick={handleCl

webpack.config 中使用 exclude 排除掉node_modules { test: /\.jsx$/, exclude: /node_modules/, loader: "babel", query: { presets:

react 无状态组件，有更高的性能，简洁的代码 特点： 1. 没有state 2. 不需要管理生命周期 3. 仅仅用来拿属性进行页面绘制 4. 返回的是一个函数demo如下：import React from 'react';export default (props) => { function handleClick() { props.onChange(

使用webpack -p 并且webpack.config.js 增加如下代码 var webpack = require(‘webpack’); plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('produc