‘壹’ react rex 怎么访问其他model的state
1、先说rex的作用
代理top-level single data flow，从最外层的container下发数据流触发mb components的更新。
2、题主的业务场景是否可以由rex解决
答案肯定是可以的，但不一定合理。
下发props告知组件B执行更新，用过react的同学都很熟悉这一套，这边不赘述。
3、业务场景的特殊性
组件交互存在两种情形，一种是纯数据模型层面的组件映射关系，完全可以由rex处理；另一种是eventEmitter层面的交互，比如使用ng2的eventEmitter或者vue的$dispatch场景。
对于后者rex其实是提供解决方案的，一种是写个小型中间件，专门用于处理pub/sub，另一种是利用rex的subscribe接口添加观察者函数来触发pub/sub。
4、是否真的需要eventEmitter
不需要。
既然你用的是react ＋ rex，就应该遵循它的设计原则，对组件划分的时候，建立足够好的view model一一映射关系。没有什么是rex解决不了的，如果有，那就重新思考下组件设计是否合理，如果还不行，那就考虑写个中间件。
‘贰’ 如何制作react组件包上传到npm
虽说现在市面上组件库相当多了，但是还有一些组件特定场景市面上没有，公司内部一些不同项目，有类似相同组件可以直接复用，避免重复造轮子，就可以直接制作一个npm包，下次直接使用。
注意：文中的每一步都很重要，都是踩过的坑
1、注册npm账号
地址： https://www.npmjs.com/signup
注意：注册完后，记得验证你的邮件地址！一定！否则会在提交组件包的时候报403错误，那是因为没有验证你的邮箱。
1、创建新的文件夹
2、进入该文件夹，使用cmd命令，npm进入安装项目流程
3、对应的字段：
有需要可以自行安装自己要的依赖，上面几个是我写组件必要的几个依赖，因为我没有写对应的依赖版本所以安装时候会以最新版本安装。
1、新建如下目录结构和文件
2、编写webpack.config.js的配置，以下是最基础的配置
上面的less-loader没有启用lessmoles模块化比较不好，假设现在项目有好几个组件，那么模块化就可以避免我们不同组件的样式污染，如果不开启就不生效，如下例子：
所以得将webpack.config.js修改如下：
接下来往babel.config.js添加编译时候需要的loader配置：
3、编写组件
这个是核心部分，就是说这里是你的组件
------------- ./src/index.jsx
------------- ./src/index.less
4、对外暴露组件，编辑根目录下的index.js文件
我这里叫Test，使用组件包引入时候就是Test组件。别人在引用组件包时候会从该文件作为入口（package.json的main字段可以配置），这个文件有两种写法，第一种：
第二种：
5、编写webpack读取的入口文件 public/app.js
webpack启动、编译、打包都会从这个文件作为入口（webpack那边配置的）
6、编写html模板，public/index.html文件。
我们知道spa单页面都是依据一个html模板上面引入js创建虚拟dom生成到这个html上面，所以需要有一个挂载的实例模板。
7、编写.gitignore文件
这个文件可以配置git上传时候忽略哪些文件不想传上去，同时发布组件包的时候它也会按照这个文件来，忽略哪些不上传。
8、添加项目启动命令：修改package.json文件
给该文件的scripts里添加两个系统命令，一个是启动命令，一个是打包命令（制作组件包用的比较少）。注意webpack4的版本可能不是 webpack server --mode development，这个需要自己对应版本。
说明是node版本问题，需要安装高点版本的node，可以使用nvm来管理node版本，这里不多说，我切换为node 12.0.0版本就可以。
到此为止，我们已经配置好了工程，接下来需要把组件包发布上去
1、发布规则
例如你是淘宝源你需要：
查看设置过的所有的源：npm config get registry
设置当前源为npm： npm config set registry https://registry.npmjs.org/
发布完成后设置回淘宝源：npm config set registry https://registry.npm.taobao.org
2、发布流程
1、登录注册好的npm账号：npm login
输入对应的账号、密码、邮箱即可
‘叁’ react antd如何读取doc文件
1.准备:
npm安装以下组件
a.安装react/antd:
npm install react react-dom antd --save
b.安装webpack/less:
npm install webpack less --save-dev
webpack根据需要选择使用-g安装
c.安装babel-loader以及其他相关package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
d.选择安装style-loader/css-loader
npm install style-loader css-loader --save-dev
2. 配置webpack.config.js
具体配置可以查看webpack提供的例子，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader
3. 编写我们的文件(例如: demo-antd.jsx)
只使用了antd提供的Button组件。只使用了antd提供的Button组件。
ps: 对比
import { Button } from 'antd';
和
import Button from 'antd/lib/button';
后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。
4. 执行构建
webpack ./demo-antd.jsx demo-antd-bundle.js
将生成demo-antd-bundle.js文件
5. 在页面中引入bundle文件(demo-antd-bundle.js)
执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。
这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。
因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是‘代码为什么这样写’这个问题，有兴趣的话，可以去查看源码，查看github上的代码比npm下载后的代码更舒服。
‘肆’ react 怎么把后端返回的html文件打开预览
去窗口找试图，能够自己调节为工作模式，就会有代码即时预览
‘伍’ 如何启动react文件
如何启动react项目
1、首先打开命令提示符工具
开始——菜单——运行——cmd
2、然后使用cd命令进入项目目录
cd my-app
3、接着运行npm start即可
注：如果项目目录中没有node_moles文件夹，需要先安装依赖
npm install
npm start和 npm run start是等效关系，在一个npm管理项目中，一般默认有start的定义，且会经常使用，所以就在npm执行中简化输入目的设置了npm run start的简写，类似的还有npm stop、npm test等等。而其他的一些不太通用的命令项则只能通过npm run <命令项>的形式执行。
‘陆’ react create app怎么引用public的文件
说说React
一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：
－ 通过前端模板引擎定义结构
－ JS文件中写自己的逻辑
－ CSS中写组件的样式
－ 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖，
那么在React中是什么样子呢？
结构和逻辑
在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。
结构
在JSX文件中，可以直接通过 React.createClass 来定义组件：
var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});
通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：
var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});
通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？
逻辑
写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？
事件响应
比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：
var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龙宝刀，点击就送</button>);
}
});
点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个 onclick 事件，里面就是需要执行的逻辑了：
function getDragonKillingSword() {
//送宝刀
}
var ButtonComponent = React.createClass({
render: function(){
return (<button onclick="getDragonKillingSword()">屠龙宝刀，点击就送</button>);
}
});
但事实上 getDragonKillingSword() 的逻辑属于组件内部行为，显然应当包装在组件内部，于是在React中就可以这么写：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送宝刀
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
}
});
这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？
暴露接口
事实上现在 getDragonKillingSword 已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？
父组件大概长这样：
var ImDaddyComponent = React.createClass({
render: function(){
return (
<div>
//其他组件
<ButtonComponent />
//其他组件
</div>
);
}
});
那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个 ref="" 属性来标记一下，比如这里把子组件设置成 <ButtonComponent ref="getSwordButton"/> ，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：
this.refs.getSwordButton.getDragonKillingSword();
看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？
配置参数
父组件可以直接将需要执行的函数传递给子组件：
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
然后在子组件中调用父组件方法：
var ButtonComponent = React.createClass({
render: function(){
return (<button onClick={this.props.clickCallback}>屠龙宝刀，点击就送</button>);
}
});
子组件通过 this.props 能够获取在父组件创建子组件时传入的任何参数，因此 this.props 也常被当做配置参数来使用
屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？
组件状态
在React中，每个组件都有自己的状态，可以在自身的方法中通过 this.state 取到，而初始状态则通过 getInitialState() 方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以 getInitialState 方法里面应当定义初始状态 clicked: false 。而在点击执行的方法中，应当修改这个状态值为 click: true ：
var ButtonComponent = React.createClass({
getInitialState: function(){
//确定初始状态
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送宝刀
//修改点击状态
this.setState({
clicked: true
});
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
}
});
这样点击状态的维护就完成了，那么render函数中也应当根据状态来维护节点的样式，比如这里将按钮设置为 disabled ，那么render函数就要添加相应的判断逻辑：
render: function(){
var clicked = this.state.clicked;
if(clicked)
return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
else
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);
}
小节
这里简单介绍了通过JSX来管理组件的结构和逻辑，事实上React给组件还定义了很多方法，以及组件自身的生命周期，这些都使得组件的逻辑处理更加强大
资源加载
CSS文件定义了组件的样式，现在的模块加载器通常都能够加载CSS文件，如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源，因为加载过来后一般不需要做什么处理。
React对这一方面并没有做特别的处理，虽然它提供了Inline
Style的方式把CSS写在JSX里面，但估计没有多少人会去尝试，毕竟现在CSS样式已经不再只是简单的CSS文件了，通常都会去用Less、
Sass等预处理，然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器
完成了
组件依赖
组件依赖的处理一般分为两个部分：组件加载和组件使用
组件加载
React没有提供相关的组件加载方法，依旧需要通过 <script> 标签引入，或者使用模块加载器加载组件的JSX和资源文件。
组件使用
如果细心，就会发现其实之前已经有使用的例子了，要想在一个组件中使用另外一个组件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中写上 <ChildComponent /> 就行了，必要的时候还可以传些参数。
疑问
到这里就会发现一个问题，React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供，更与Angularjs，jQuery等不同的是，他还不带啥脚手架…没有Ajax库，没有Promise库，要啥啥没有…
虚拟DOM
那它为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起
如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产
生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。
这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS
操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提
供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的
JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff
算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会
有较大提升
‘柒’ react public 里面的index.html 和 manifest 被我删了 怎么还原回来
你是直接销毁了还是删除，删除撤回就行了，销毁的话可能要从新来了
‘捌’ React引用图片不显示的问题
用create-react-app脚手架搭建好react项目之后吗，引用图片的时候发现路径是正确的，图片不显示，后来查了查原来跟我 图片放的位置 有关系
我的图片放在了src下的assets的img文件夹中，这样的话，查了一下，这种情况下直接用src会出现问题但是用require是可以的
注意：require中只能放字符串，不能放变量
后来看了看create-react-app的官网，官网明确说出最好将图片样式等放在public文件夹中，是可以用的<img src="../images/photo.png"/>这种形式的
如下图官网：
Using the Public Folder · Create React App
改装后的文件夹如下，将图片放在了public文件夹中：
这样就可以用了~
记录自己遇到的问题，仅供学习参考
原文链接： https://zhuanlan.hu.com/p/55487754
‘玖’ 百度百科 react怎样写公共的方法
react to
1.对…作出反应
2.对…起反应
3.起反应
4.对……反应
react (to)
1.起反应
react to respond to
1.对…做出反应
respond to react to
1.对…做出反应
react to sth
1.对…反应
2.对…作出反应
‘拾’ react-router路由配置怎么访问
以下是我做的一个案例的route配置信息，他是用来链接你的每个页面的，简单点就是超链接里面的一个关键id一样，来识别页面的属性，path属性就是链接里面要引用的, 例如：http://localhost:3000/#/recharge?_k=3l0sz9。这里的recharge就是path属性。 import React from 'react'; import { Route } from 'react-router'; /* containers */ import { App } from 'containers/App'; import { Home } from 'containers/Home'; import { Activity } from 'containers/Activity'; import { List } from 'containers/List'; import { UserInfomation } from 'containers/User/UserInfomation'; import { UserMain } from 'containers/User/UserMain'; import { Recharge } from 'containers/User/Recharge'; import { Rules } from 'containers/Rules/Rules'; import { Ordered } from 'containers/Order/Ordered'; export default ( <Route path="/" component={App}> <Route path="home" component={Home} /> <Route path="list" component={L