等待中！！！
}
16 | 这里是表头
69 |
这里是表头
14 |
20 |
25 | );
26 | }
27 | ```
28 |
29 | 组件很难复用状态逻辑，并且复杂的组件难以被理解，尤其是生命周期函数。
30 |
31 |
--------------------------------------------------------------------------------
/React-01/react-hooks/useeffect.md:
--------------------------------------------------------------------------------
1 | # useEffect
2 |
3 | * 每次渲染之后都会执行
4 |
5 | ```js
6 | import React, { userState, useEffect } from 'react'
7 |
8 | const ViewUserName = () => {
9 | const [userName, setUserName ] = userState('');
10 | useEffect(() => {
11 | document.title = `用户-${userName}`;
12 | })
13 | return (
14 | <>
15 | { setUserName(val) }} />
16 | <>
17 | )
18 | }
19 | ```
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/React-01/react-proptypes.md:
--------------------------------------------------------------------------------
1 | # React PropTypes
2 |
3 | React PropType 是React对于组件传入props的数据类型进行检查
4 |
5 | * 注意:`React.PropTypes`自 React v15.5 起已弃用。请使用[`prop-types`](https://www.npmjs.com/package/prop-types)库代替。Context中使用也要注意。
6 |
7 | 通过类型检查保证数据传递的正确性
8 |
9 | ```js
10 | import PropTypes from 'prop-types';
11 | import React from 'react';
12 |
13 | class App extends React.Component{
14 | render(){
15 | return(
16 |
17 | )
18 | }
19 | }
20 | ```
21 |
22 | PropType只适用于开发环境
23 |
24 | ```js
25 | import PropTypes from 'prop-types';
26 |
27 | MyComponent.propTypes = {
28 | // 你可以将属性声明为以下 JS 原生类型
29 | optionalArray: PropTypes.array,
30 | optionalBool: PropTypes.bool,
31 | optionalFunc: PropTypes.func,
32 | optionalNumber: PropTypes.number,
33 | optionalObject: PropTypes.object,
34 | optionalString: PropTypes.string,
35 | optionalSymbol: PropTypes.symbol,
36 |
37 | // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
38 | optionalNode: PropTypes.node,
39 |
40 | // 一个 React 元素
41 | optionalElement: PropTypes.element,
42 |
43 | // 你也可以声明属性为某个类的实例，这里使用 JS 的
44 | // instanceof 操作符实现。
45 | optionalMessage: PropTypes.instanceOf(Message),
46 |
47 | // 你也可以限制你的属性值是某个特定值之一
48 | optionalEnum: PropTypes.oneOf(['News', 'Photos']),
49 |
50 | // 限制它为列举类型之一的对象
51 | optionalUnion: PropTypes.oneOfType([
52 | PropTypes.string,
53 | PropTypes.number,
54 | PropTypes.instanceOf(Message)
55 | ]),
56 |
57 | // 一个指定元素类型的数组
58 | optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
59 |
60 | // 一个指定类型的对象
61 | optionalObjectOf: PropTypes.objectOf(PropTypes.number),
62 |
63 | // 一个指定属性及其类型的对象
64 | optionalObjectWithShape: PropTypes.shape({
65 | color: PropTypes.string,
66 | fontSize: PropTypes.number
67 | }),
68 |
69 | // 你也可以在任何 PropTypes 属性后面加上 `isRequired`
70 | // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
71 | requiredFunc: PropTypes.func.isRequired,
72 |
73 | // 任意类型的数据
74 | requiredAny: PropTypes.any.isRequired,
75 |
76 | // 你也可以指定一个自定义验证器。它应该在验证失败时返回
77 | // 一个 Error 对象而不是 `console.warn` 或抛出异常。
78 | // 不过在 `oneOfType` 中它不起作用。
79 | customProp: function(props, propName, componentName) {
80 | if (!/matchme/.test(props[propName])) {
81 | return new Error(
82 | 'Invalid prop `' + propName + '` supplied to' +
83 | ' `' + componentName + '`. Validation failed.'
84 | );
85 | }
86 | },
87 |
88 | // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`
89 | // 验证器，它应该在验证失败时返回一个 Error 对象。 它被用
90 | // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
91 | // 或对象本身，第二个是它们对应的键。
92 | customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
93 | if (!/matchme/.test(propValue[key])) {
94 | return new Error(
95 | 'Invalid prop `' + propFullName + '` supplied to' +
96 | ' `' + componentName + '`. Validation failed.'
97 | );
98 | }
99 | })
100 | };
101 | ```
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/React-01/react-rong-qi-zu-jian-he-sha-gua-zu-jian.md:
--------------------------------------------------------------------------------
1 | # React 容器组件和展示组件
2 |
3 | * 让一个组件只专注做一件事，如果发现一个组件做的事情太多了，就可以把这个组件拆分成多个组件，让每个组件依然只专注做一件事。
4 |
5 | #### 分析
6 |
7 | Redux框架之下，React组件要完成以下的事情
8 |
9 | * 和Redux Store进行交流，读取Store状态，用于初始化组件的状态，同时还要监听Store的状态改变；当Store状态发生变化时，需要更新组件状态，从而驱动组建重新渲染；但需要更新Store状态时，就要派发action对象；
10 | * 根据当前props和state，渲染出用户界面
11 |
12 | 所以为了让React对于处理数据和显示界面能更加专注。我们可以把其组件进行拆分，让一部分专注于处理数据，让另一部分专注于显示界面。这样在通过嵌套调用。完成之前一个组件的任务。
13 |
14 | #### 第一种组件【容器组件\(Container Component\)】
15 |
16 | 它要专注于处理数据，负责和Redux Store进行交流，用来做状态处理，它是动态的。处于组件嵌套的外层，所以叫做容器组件
17 |
18 | ```js
19 | //容器组件
20 | import React from 'react'
21 | import Counter from './component/counter'
22 | class CounterContainer extends React.Component{
23 | //...addNum,removeNum,value
24 | render(){
25 | return(
26 | You clicked {count} times
21 | 24 |
27 |
28 |
29 | )
30 | }
31 | }
32 | ```
33 |
34 | #### 第二种组件【展示组件\(Presentational Component\)】
35 |
36 | 它主要专注于view，它本身是纯函数，通过接收父组件传递过来的props产生结果渲染页面，所以它是无状态的，。处于组件嵌套的内层，所以叫它展示组件
37 |
38 | ```js
39 | //展示组件
40 | import React from 'react'
41 | class Counter extends React.Component{
42 | const {addNum,removeNum,value} = this.props
43 | render(){
44 |
45 |
46 |
47 | {value}
48 |
49 | }
50 | }
51 | export default Counter
52 | ```
53 |
54 | 对于无状态组件还可以进行进一步优化。基于它是一种纯函数思想，传入参数返回处理后的数据。所以可以进行如下改写
55 |
56 | ```js
57 | //展示组件改进
58 | function Counter(props){
59 | const {addNum,removeNum,value} = props;
60 | return({
61 |
62 |
63 |
64 | {value}
65 |
66 | })
67 | }
68 | //另一种写法，写成解构赋值
69 | function Counter({addNum,removeNum,value}){
70 | //直接使用addNum,removeNum,value这些变量
71 | }
72 | ```
73 |
74 | 所以对于`容器组件`也有人称为它为`智能组件`，对于展示`组件`也有人称它为`傻瓜组件`
75 |
76 | ---
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/React-01/react-setstate.md:
--------------------------------------------------------------------------------
1 | # React setState
2 |
3 | 
4 |
5 |
--------------------------------------------------------------------------------
/React-01/react-xu-ni-dom-gai-nian.md:
--------------------------------------------------------------------------------
1 | # React 虚拟DOM概念
2 |
3 | ## 虚拟DOM的结构
4 |
5 | * 在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。如果当前 DOM 结构较为复杂，频繁的操作很可能会引发性能问题。React 为了解决这个问题，引入了虚拟 DOM 技术。
6 |
7 | [](https://camo.githubusercontent.com/f7ef01807667efafed5f2b9d8b9a2fbd0cc8e27f/68747470733a2f2f7777772e69626d2e636f6d2f646576656c6f706572776f726b732f636e2f7765622f313530395f646f6e677975655f72656163742f696e646578363633392e706e67)
8 |
9 | * 虚拟 DOM 是一个 JavaScript 的树形结构，包含了 React 元素和模块。组件的 DOM 结构就是映射到对应的虚拟 DOM 上，React 通过渲染虚拟 DOM 到浏览器，使得用户界面得以显示。与此同时，React 在虚拟的 DOM 上实现了一个 diff 算法，当要更新组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以在 React 中，当页面发生变化时实际上不是真的渲染整个 DOM
10 | * React 虚拟 DOM 中的诸多如 div 一类的标签与实际 DOM 中的 div 是相互独立的两个概念，它是一个纯粹的 JS 数据结构，它只是提供了一个与 DOM 类似的 Tag 和 API。React 会通过自身的逻辑和算法，转化为真正的 DOM 节点。也正是因为这样的结构，虚拟 DOM 的性能要比原生 DOM 快很多。
11 |
12 |
--------------------------------------------------------------------------------
/React-01/react-zu-jian-zi-dai.md:
--------------------------------------------------------------------------------
1 | # React 组件Child
2 |
3 | 我们先来看一个例子
4 |
5 | ```javascript
6 | import React from 'react';
7 | import Main from './Main';
8 | import Child from './Child';
9 |
10 | class App extends React.Component {
11 | render() {
12 | return (
13 |
14 |
15 | {(files)=>files?
17 |
18 | );
19 | }
20 | }
21 |
22 | export default App;
23 | ```
24 |
25 | 在App组件中，其中Main组件中包含了一个Child组件，这个Child组件就是Main组件的子组件。
26 |
27 | 接下来我们看看Main和Child中写了些什么
28 |
29 | * 组件Main
30 |
31 | ```javascript
32 | import React from 'react';
33 |
34 | class Main extends React.Component {
35 | constructor(props) {
36 | super(props)
37 | this.state = {
38 | files:''
39 | }
40 | }
41 | componentDidMount(){
42 | const title = this.props.id
43 | this.setState({files:title})
44 | }
45 | render(){
46 | const children = this.props.children(this.state.files)
47 | return(
48 | {children}
49 | )
50 | }
51 | }
52 |
53 | export default Main
54 | ```
55 |
56 | * 组件Child
57 |
58 | ```javascript
59 | import React from 'react';
60 |
61 | class Child extends React.Component {
62 | constructor(props) {
63 | super(props)
64 | }
65 | render(){
66 | return(
67 |
68 | {this.props.files}
69 |
71 | )
72 | }
73 | }
74 |
75 | export default Child
76 | ```
77 |
78 | 在这里我通过React的组件Child，来进行操作。可以通过`this.props.children`来得到父组件Main之下的子组件Child
79 |
80 | 在App组件中通过props传递给Main组件一个名为id的参数，使用`?:`进行一个判断如果，files值有传递那就渲染Child，如果没有那就渲染等待中组件
81 |
82 | ```javascript
83 | Child
70 |
84 |
85 | {(files)=>files?
87 |
88 | ```
89 |
90 | 在Main中接受props传递过来的props。通过处理props，改变state，从而改变传递给子组件的state
91 |
92 | ```javascript
93 | componentDidMount(){
94 | const title = this.props.id
95 | this.setState({files:title})
96 | }
97 | render(){
98 | const children = this.props.children(this.state.files)
99 | return(
100 | 等待中！！！
}
86 | {children}
101 | )
102 | }
103 | ```
104 |
105 | 关键的问题是获取子组件，所以就引出了最重要的一环`this.props.children`
106 |
107 | 这里的`this.props.children(this.state.files)`只是获取子组件，而且子组件也不会自动渲染，需要在父组件中渲染一次，所以要`return({children}
)`，这样才能真正渲染出子组件。
108 |
109 | ## this.props.children
110 |
111 | 我们来看看在Main组件中我们能通过`this.props.children`获取什么。
112 |
113 | 它获取到了整个三目运算符判断后的结果为`等待中！！！
`，因为此时还没有进行setState，在经过setState后它就变成了`
19 |
22 | )
23 | }
24 | }
25 | }
26 | ```
27 |
28 | **高阶组件**的实现方式可以分为两大类：
29 |
30 | 1. 代理方式的高阶组件
31 | 2. 继承方式的高阶组件
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/React-02/REACT_HOC/dai-li-fang-shi-de-gao-jie-zu-jian.md:
--------------------------------------------------------------------------------
1 | # 代理方式的高阶组件
2 |
3 | 代理方式的高阶组件，特点是返回新组件，直接继承React.Component
4 |
5 | ```javascript
6 | import React from 'react'
7 |
8 | function doingThings (BaseComponent){
9 | return class DoingThingsComponent extends React.Component{
10 | render(){
11 | return(
12 | 这个高阶组件特有的
20 |
13 |
16 | )
17 | }
18 | }
19 | }
20 | ```
21 |
22 | 代理方式的高阶组件，下列场景中：
23 |
24 | * 操纵prop；
25 | * 访问ref；
26 | * 抽取状态；
27 | * 包装组件；
28 |
29 | ## 1.操纵prop
30 |
31 | ## 2.访问ref
32 |
33 | ## 3.抽取状态
34 |
35 | ## 4.包装组件
36 |
37 |
--------------------------------------------------------------------------------
/React-02/REACT_HOC/ji-cheng-fang-shi-de-gao-jie-zu-jian.md:
--------------------------------------------------------------------------------
1 | # 继承方式的高阶组件
2 |
3 | 继承方式的高阶组件采用继承关系关联作为参数的组件和返回的组件
4 |
5 | ```javascript
6 | function doingThings (BaseComponent){
7 | return class DoingThingsComponent extends BaseComponent{
8 | render(){
9 | const {user, ...other} = this.props;
10 | this.props = otherProps;
11 | return super.render();
12 | }
13 | }
14 | }
15 | ```
16 |
17 | 继承组件可以应用一下两个场景：
18 |
19 | * 操纵props；
20 | * 操纵函数生命周期
21 |
22 |
--------------------------------------------------------------------------------
/React-02/REACT_MINXI.md:
--------------------------------------------------------------------------------
1 | # React 独立组件间共享 Mixins ⚠
2 |
3 | 不提倡使用，提倡使用HOC高阶组件
4 |
5 | * ES6不支持Mixin，所以需要相插件来进行支持，`npm install --save react-mixin@2`
6 | * 测试一下Mixin是如何运行的
7 | * 在`src/js/components`下创建`mixins.js`
8 |
9 | ```javascript
10 | const MixinLog = {
11 | componentDidMount(){
12 | console.log("MixinLog componentDidMount");//查看Mixin生命周期
13 | }
14 | ,log(){console.log("tyrmars")}
15 | };
16 |
17 | export default MixinLog//向外输出
18 | ```
19 |
20 | * 在bodyIndex.js中
21 |
22 | ```javascript
23 | import React from 'react';
24 | import ReactDOM from 'react-dom';
25 | import BodyChild from './bodychild';
26 | import ReactMixin from 'react-mixin';
27 | import MixinLog from './mixins';
28 | changeUserInfo() {
29 | MixinLog.log();
30 | };
31 | render() {
32 | return(
33 |
34 | )
35 | }
36 | BodyIndex.defaultProps = defaultProps;
37 | ReactMixin(BodyIndex.propTypes,MixinLog);
38 | ```
39 |
40 | * 点击页面上的提交按钮🔘在`console.log`中会出现`MixinLog componentDidMount`和`tyrmars`
41 |
42 |
--------------------------------------------------------------------------------
/React-02/REACT_SHIJIAN_TWO.md:
--------------------------------------------------------------------------------
1 | # React 事件与数据的双向绑定
2 |
3 | * bodyIndex.js代码
4 |
5 | ```javascript
6 | import React from 'react';
7 | import BodyChild from './bodychild'
8 | export default class BodyIndex extends React.Component {
9 | constructor() {
10 | super(); //调用基类的所有的初始化方法
11 | this.state = {
12 | username: "Parry",
13 | age:20
14 | };//初始化赋值
15 | }
16 |
17 | handleChildValueChange(event){
18 | this.setState({age:event.target.value});//取出子页面的值
19 | }
20 |
21 | changeUserInfo(){
22 | this.setState({age:50});
23 | };
24 |
25 | render() {
26 | return (
27 | 这个高阶组件特有的
14 |
28 |
33 |
34 | )
35 | }
36 | }
37 | ```
38 |
39 | * bodychild.js代码
40 |
41 | ```javascript
42 | import React from 'react';
43 | export default class BodyChild extends React.Component{
44 |
45 | render() {
46 | return(
47 | 页面主题内容
29 |{this.state.username} {this.state.age} {this.props.userid} {this.props.username}
30 |age: {this.state.age}
31 | 32 |
48 |
50 | )
51 | }
52 | }
53 | ```
54 |
55 | * 通过在子页面`BodyChild`设置`props`，子页面`value`改变调用`handleChildValueChange`，传值到父页面`bodyIndex`。也就是说在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递。
56 | * 思考（onChange与onBlur）的对比。
57 | * `ES6`的语法注意
58 | * 函数绑定方法this ：`this.forceUpdateHander = this.forceUpdateHander.bind(this)`
59 | * 或者调用时绑定：`onClick={this.changeUserInfo.bind(this,50)}`
60 |
61 |
--------------------------------------------------------------------------------
/React-02/README.md:
--------------------------------------------------------------------------------
1 | # React 进阶知识
2 |
3 | ## 
4 |
5 |
--------------------------------------------------------------------------------
/React-03/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TYRMars/React-StepPitGuide/ee09ad7119b7b1bc17b1a05861036ec1cd257ebe/React-03/README.md
--------------------------------------------------------------------------------
/React-06/README.md:
--------------------------------------------------------------------------------
1 | # React 性能优化
2 |
3 | ## React组件性能优化
4 |
5 | * 传递参数要少传，降低React传递数据的负担。尽量不产生新的数据。
6 | * 组件间性能优化，shouldComponentUpdate函数；PureRender；PureComponent 当组件只接受父组件的props，可以使用（React15.4），减少React组件渲染次数。ImmutableJS，通过不可变的数据结构，直接比较其hash值。
7 |
8 | ## Redux性能优化
9 |
10 | * Reselect中间件的使用，纯函数特点：稳定输入稳定输出
11 |
12 | ## React同构
13 |
14 | * 首屏采用服务端渲染
15 | *
16 |
--------------------------------------------------------------------------------
/React-06/react-zu-jian-you-hua.md:
--------------------------------------------------------------------------------
1 | # React 组件优化
2 |
3 | * 属性传递优化
4 | * 多组件优化
5 | * key
6 |
7 | ### 属性传递
8 |
9 | ##### Example
10 |
11 | ```js
12 | import React from 'react'
13 |
14 | class App extends React.Component{
15 | constructor(props){
16 | super(props)
17 | this.state = {
18 | num:1
19 | }
20 | }
21 | handleClick(){
22 | this.setState({
23 | num:this.state.num+1
24 | })
25 | }
26 | render(){
27 | return(
28 | 子页面输入：
49 |
29 |
33 | )
34 | }
35 | }
36 |
37 | export default App;
38 | ```
39 |
40 | 此处的性能优化点在于`onClick`所触发的函数，是想在JavaScript中，如下
41 |
42 | ```js
43 | 1 == 1 //true
44 | {c:1} == {c:1} //这种情况下是false，因为每次生成的对象，存入到内存的地址是不同的
45 | ```
46 |
47 | 所以在这函数会重复的生成，导致重复render，这个地方就是要优化的点，优化方法如下
48 |
49 | ```js
50 | import React from 'react'
51 |
52 | class App extends React.Component{
53 | constructor(props){
54 | super(props)
55 | this.state = {
56 | num:1
57 | }
58 | this.handleClick = this.handleClick.bind(this)
59 | }
60 | handleClick(){
61 | this.setState({
62 | num:this.state.num+1
63 | })
64 | }
65 | render(){
66 | return(
67 | App
30 | 31 | 32 |
68 |
71 | )
72 | }
73 | }
74 |
75 | export default App;
76 | ```
77 |
78 | 这样就是通过在构造函数里声明。不会在每次render的时候重复生成。这个是因为类通过构造函数实例化，在constructor里进行绑定，只用生成一次，后面就可以直接调用。
79 |
80 | ### 组件数据传递
81 |
82 | ```js
83 | import React from 'react'
84 |
85 | class App extends React.Component {
86 | constructor(props){
87 | super(props)
88 | this.state={
89 | num:1,
90 | title:'tyrmars',
91 | name:'zhang'
92 | }
93 | this.handleClick = this.handleClick.bind(this)
94 | }
95 | handleClick(){
96 | this.setState({
97 | num:this.state.num+1
98 | })
99 | }
100 | render() {
101 | const
102 | return (
103 | App
69 | 70 |
104 |
108 | )
109 | }
110 | }
111 |
112 | class Demo extends React.Component {
113 | render() {
114 | return (I am App
105 | 106 |I am Demo
) 115 | } 116 | } 117 | 118 | export default App 119 | ``` 120 | 121 | 每次对Demo进行数据传递的时候都会生成一个新的对象 122 | 123 | ```js 124 |
27 |
31 | )
32 | }
33 | }
34 |
35 | class Demo extends React.Component {
36 | render() {
37 | return (I am App
28 | 29 |I am Demo，{this.props.title}
) 38 | } 39 | } 40 | 41 | export default App 42 | ``` 43 | 44 | ## React16性能检测 45 | 46 | 通过在浏览器中在链接上加入`/?react_pref`。 47 | 48 |  49 | 50 | 通过此方法可以在浏览器默认的性能监视器Performance中查看性能改变 51 | 52 |  53 | 54 | * test 55 | 56 | 通过定制shouldComponentUpdate来减少组件的render从而优化性能 57 | 58 | 主要就是对比现有的props和state与改变后的不同，如果相同就不会再次渲染 59 | 60 | ```javascript 61 | class Demo extends React.Component { 62 | shouldComponentUpdate(nextProps, nextState){ 63 | if(nextProps.title === this.props.title){ 64 | return false 65 | } 66 | return true 67 | } 68 | render() { 69 | return (I am Demo，{this.props.title}
) 70 | } 71 | } 72 | 73 | export default App 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /React-06/react-zu-jian-you-hua/purecomponent.md: -------------------------------------------------------------------------------- 1 | # PureComponent 2 | 3 | 还有就是通过使用React.PureComponent来对组件进行优化，这个也是React16官方新加入的，意思类似于纯组件 4 | 5 | 使用的地方一般是在只接收从父组件传递过来数据的组件，也就是只接受props的组件 6 | 7 | ```javascript 8 | class Demo extends React.PureComponent{ 9 | //.... 10 | } 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /React-06/reacttong-gou.md: -------------------------------------------------------------------------------- 1 | # React同构 2 | 3 | -------------------------------------------------------------------------------- /React-06/reduxxing-neng-you-hua.md: -------------------------------------------------------------------------------- 1 | # Redux性能优化 2 | 3 | -------------------------------------------------------------------------------- /React-07/README.md: -------------------------------------------------------------------------------- 1 | # React 服务端渲染SSR 2 | 3 | ### 服务端渲染介绍 4 | 5 | * 传统的服务端渲染：JSP、smaty、jinja2等 6 | * 浏览器渲染 7 | 8 | ### React服务端渲染主要是浏览器渲染 9 | 10 | * 后端只提供静态资源和接口 11 | * 前端写模板 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /React-08/README.md: -------------------------------------------------------------------------------- 1 | # React 项目应用 2 | 3 | * 文件组织方式 4 | * 模块接口 5 | * 合并reducer 6 | * 其他问题 7 | 8 | -------------------------------------------------------------------------------- /React-08/react-he-bing-reducer.md: -------------------------------------------------------------------------------- 1 | # React 合并reducer 2 | 3 | 通过一个combineReducers合并所有的reducers 4 | 5 | ```javascript 6 | //合并所有reducer 7 | import { combineReducers } from 'redux' 8 | import { user } from './redux/user.redux' 9 | import { chatuser } from './redux/chatuser.redux' 10 | import { chat } from './redux/chat.redux' 11 | 12 | export default combineReducers({user,chatuser,chat}) 13 | ``` 14 | 15 | 在index中使用reducers来进行数据管理 16 | 17 | ```javascript 18 | import reducers from './reducer' 19 | const store = createStore(reducers) 20 | ``` 21 | 22 | -------------------------------------------------------------------------------- /React-08/react-mo-kuai-jie-kou.md: -------------------------------------------------------------------------------- 1 | # React 模块接口 2 | 3 | -------------------------------------------------------------------------------- /React-08/react-wen-jian-zu-zhi-fang-shi.md: -------------------------------------------------------------------------------- 1 | # React 文件组织方式 2 | 3 | ## 常用方式 4 | 5 | * reducer目录包含所有Redux的reducer； 6 | * actions目录包含所有的action构造函数； 7 | * component目录包含所有的展示组件； 8 | * container目录包含所有的容器组件； 9 | 10 | -------------------------------------------------------------------------------- /React-08/react-wen-ti.md: -------------------------------------------------------------------------------- 1 | # React 问题 2 | 3 | 补全代码，使得如下代码可以实现获取文件夹内文件列表功能（Loading 和 FileList 组件可以不用具体实现，只需补全 Folder 组件的代码）： 4 | 5 | ```javascript 6 | /** 7 | * 使用样例： 8 | *{child}
36 | );
37 | }
38 | }
39 |
40 | Folder.propTypes = {
41 | children: React.PropTypes.element.isRequired
42 | }
43 | ```
44 |
45 |
--------------------------------------------------------------------------------
/React-09/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TYRMars/React-StepPitGuide/ee09ad7119b7b1bc17b1a05861036ec1cd257ebe/React-09/README.md
--------------------------------------------------------------------------------
/React-10/README.md:
--------------------------------------------------------------------------------
1 | # React Buid-React
2 |
3 | 简单实现React
4 |
5 | ```js
6 | /* jsx h */
7 | function h(type,props,...children){
8 | return(type,props,children)
9 | }
10 |
11 | //render 函数
12 | function render(node){
13 | //如果只是一个字符串
14 | if(typeof node === 'string'){
15 | return document.createTextNode(node);
16 | }
17 | //如果是HTML节点形成
18 | const $elem = document.createElement(node.type);
19 | node.children.map(createElement).forEach($elem.appendChild.bind($elem));
20 | return $elem;
21 | }
22 |
23 | //diff 算法
24 | function changed(node_NEW,node_OLD){
25 | return typeof node_OLD !== typeof node_NEW ||
26 | typeof node_OLD === 'string' && node_OLD !== node_NEW ||
27 | node_OLD.type !== node.type
28 | }
29 |
30 | //更新算法
31 | function updateElement($parent,node_NEW,node_OLD,index = 0){
32 |
33 | }
34 |
35 | /* html */
36 | const list = (
37 | -
38 |
- 1 39 |
- 2 40 |
33 |
36 | )
37 | }
38 | }
39 |
40 | export default App
41 | ```
42 |
43 | ##### `index.redux.js`
44 |
45 | ```js
46 | //aciton
47 | const ADD = 'add';
48 | const REDUCE = 'reduce';
49 |
50 | // reducer
51 | exports.counter = function (state=0,action) {
52 | switch (action.type) {
53 | case 'add':
54 | return state+1;
55 | case 'reduce':
56 | return state-1;
57 | default:
58 | return 10
59 | }
60 | };
61 |
62 | // action creator
63 | exports.add = function () {
64 | return {type:ADD};
65 | };
66 | exports.reduce = function () {
67 | return {type:REDUCE};
68 | };
69 | ```
70 |
71 | * 此种方式耦合程度太高，为了保证组件的独立性做出如下修改
72 | * index.redux.js封装📦了`add`函数，直接import这个函数
73 | * 通过参数形式传递给App.js
74 |
75 | ```js
76 | import React from 'react'
77 | import ReactDom from 'react-dom'
78 | import {createStore} from 'redux'
79 | import {counter,add} from './index.redux'
80 | import App from './App'
81 |
82 | const store = createStore(counter)//新建一个store
83 |
84 | function render() {
85 | ReactDom.render(展示dedux数据{num}
34 | 35 |
111 |
115 | )
116 | }
117 | }
118 |
119 | export default App
120 | ```
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/Redux-01/REDUX_CHROME.md:
--------------------------------------------------------------------------------
1 | # Redux Chrome插件使用
2 |
3 | * 🆕新建store的时候判断window.devToolsExtension
4 | * 使用compose结合thunk和winows.devToolsExtension
5 | * 调试窗的redux选项卡，实时看到state
6 |
7 | ```js
8 | import React from 'react'
9 | import ReactDom from 'react-dom'
10 | import thunk from 'redux-thunk'
11 | import {createStore, applyMiddleware ,compose} from 'redux'
12 | import {counter,add,reduce,addAsync} from './index.redux'
13 | import App from './App'
14 |
15 | const store = createStore(counter,compose(
16 | applyMiddleware(thunk),
17 | window.devToolsExtension ? window.devToolsExtension():()=>{}
18 | ))
19 |
20 | function render() {
21 | ReactDom.render(展示dedux数据{num}
112 | 113 | 114 |
105 |
110 | )
111 | }
112 | }
113 |
114 | export default App
115 | ```
116 |
117 | ---
118 |
119 |
120 |
121 |
--------------------------------------------------------------------------------
/Redux-01/REDUX_USE.md:
--------------------------------------------------------------------------------
1 | # Redux
2 |
3 | 
4 |
5 | * Redux专注与状态管理、和react解耦
6 | * 单一状态、单向数据流
7 | * 核心概念：`store`、`state`、`action`
8 |
9 | ```
10 | 为什么会出现Redux呢，因为在处理少量数据的时候，可以使用setState
11 | 但是如果，现在有🈶️成千上万的数据，数据的传递就要和组件的显示分开
12 | 所以Redux就是来帮助React来管理数据的，React现在只负责自己的View
13 | ```
14 |
15 | * `store`:📝记录了所有组件的状态\(state\)
16 | * `dispatch`:更改管理实体
17 | * `action`:要更改什么
18 | * `reducer`:这个🈯️指的是要改变的组件，它获取`state`和`action`，生成新的`state`
19 |
20 | ##
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/Redux-01/redux-shi-yong.md:
--------------------------------------------------------------------------------
1 | # Redux使用
2 |
3 | 
4 |
5 | * 通过`reducer`新建`store`，随时通过`store.getState`获取状态
6 | * 需要状态变更，`store.dispatch(action)`来修改状态
7 | * `reducer`函数接受`state`和`action`，🔙返回🆕新的`state`，可以用`store.subscribe`监听每次修改
8 |
9 | ##### `index.js`
10 |
11 | ```js
12 | import {createStore} from 'redux'
13 |
14 | function counter(state=0,action) {
15 | switch (action.type) {
16 | case 'add':
17 | return state+1;
18 | case 'reduce':
19 | return state-1;
20 | default:
21 | return 10
22 | }
23 | }
24 |
25 | //新建store
26 | const store = createStore(counter);
27 | const init = store.getState();
28 | console.log(init);
29 |
30 | //监听
31 | function listener() {
32 | const current = store.getState();
33 | console.log(`现在有的${current}`);
34 | }
35 | store.subscribe(listener)
36 |
37 | //派发事件 传递aciton
38 | store.dispatch({type:'add'});
39 | store.dispatch({type:'reduce'});
40 | store.dispatch({type:'add'});
41 | store.dispatch({type:'add'});
42 | ```
43 |
44 | ## Action
45 |
46 | action 内必须使用一个字符串类型的`type`字段来表示将要执行的动作。多数情况下，`type`会被定义成字符串常量。当应用规模越来越大时，建议使用单独的模块或文件来存放 `action`。
47 |
48 | ## Action创建函数
49 |
50 | **Action 创建函数**就是生成 action 的方法。
51 |
52 | ```js
53 | // action creator
54 |
55 | export function add() {
56 | return {type:ADD};
57 | };
58 | export function reduce() {
59 | return {type:REDUCE};
60 | };
61 | ```
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/Redux-01/redux-zi-zhi-arr-zhong-jian-jian.md:
--------------------------------------------------------------------------------
1 | # 自制Arr中间件
2 |
3 | ```js
4 | const arrMid = ({dispatch, getState}) => next => action => {
5 | //如果是函数，执行一下
6 | if (Array.isArray(action)) {
7 | return action.forEach(v=>dispatch(v))
8 | }
9 | //默认什么都没做，继续执行下一个
10 | return next(action)
11 | }
12 | export default arrMid
13 | ```
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Router-01/REACT_ROUTER2.md:
--------------------------------------------------------------------------------
1 | # React-Router2
2 |
3 | ## React Router2
4 |
5 | * 由于对于新版的`Router`的不熟悉，这节开始转向`Router2`和`webpack1`，等待`React-Router4`理解后，我会更新这几章
6 | * [Router](https://github.com/ReactTraining/react-router)
7 | * 以上`Router`采用的是`Router2`
8 | * `Router`中文是路由的意思。
9 | * 路由库`React-Router`。它是官方维护的，事实上也是唯一可选的路由库。它通过管理 `URL`，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。
10 |
11 | ### 基本用法
12 |
13 | * `$ npm install react-router`安装`React-Router`，最新的为`React-Router4`。
14 |
15 | ```javascript
16 | import React from 'react';
17 | import ReactDOM from 'react-dom';
18 | import Index from './index';
19 | import ComponentList from './components/list';
20 | import ComponentDetails from './components/details';
21 | import {Router,Route,hashHistory} from 'react-router';
22 |
23 | export default class Root extends React.Component{
24 | render(){
25 | return (
26 | //这里替换了之前的 Index，变成了程序的入口
27 | 展示dedux数据{num}
106 | 107 | 108 | 109 |hello world ！！
, 22 | document.getElementById('example') 23 | ); 24 | ``` 25 | 26 | * 基本的文档就写好了，下一节是WebPack打包📦 27 | 28 | ## WebPack 热加载配置\(中\) 29 | 30 | * 采用`WebPack2`进行打包 31 | * `WebPack2`安装`sudo npm install -g webpack` 32 | * `WebPack-dev-server`安装`sudo npm install -g webpack-dev-server` 33 | * 全局安装完后进行项目目录下的安装！！！！（安装的时候最好在前面加上sudo，有时权限不够会安装失败） 34 | 35 | ```text 36 | $ sudo npm install webpack --save 37 | $ sudo npm install webpack-dev-server --save 38 | ``` 39 | 40 | * 出现问题可以看[React配置必踩坑](http://www.kejiganhuo.tech/?p=374)！！！ 41 | * 在目录文件下建立一个`webpack.config.js` 42 | * 很多参考都是采用`WebPack1`进行打包，对于`webpack2`更新后的讲解很少 43 | * 不过还是可以通过官方文档，加上对`webpack1`的学习，自己还是琢磨出了`webpack2`如何配置，`\(^o^)/~`，如下 44 | * **WebPack2配置信息** 45 | 46 | ```javascript 47 | // webpack.config.js 48 | var webpack = require("webpack"); 49 | var path = require("path"); 50 | 51 | module.exports = { 52 | devtool: 'source-map', 53 | context: path.resolve(__dirname, "src"), 54 | entry: "./js/index.js", 55 | output: { 56 | path: path.resolve(__dirname, "src"), 57 | filename: 'bundle.js' // 打包输出的文件 58 | }, 59 | module: { 60 | rules: [{ 61 | test: /\.js$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译 62 | exclude: /(node_modules)/, 63 | use: [{ 64 | loader: 'babel-loader', 65 | //配置参数; 66 | options: { presets: ['es2015','react'] } 67 | }], 68 | }] 69 | }, 70 | }; 71 | ``` 72 | 73 | ### 接下来运行WebPack打包 74 | 75 | * 在Mac终端中，项目的根目录下，`webpack`进行打包，成功打包后会在src目录下生成bundle.js，在浏览器中查看 76 | * 原本页面上的`123`覆盖成了`hello world ！！` 77 | 78 | ## WebPack 热加载配置\(下\) 79 | 80 | ### webpack-dev-server的使用 81 | 82 | * 不用每次都去用`WebPack`一遍 83 | * `webpack -watch`自动监听编译，但是需要手动刷新浏览器 84 | * 如果采用在Mac终端中项目根目录下`webpack-dev-server`这样可以`浏览器中`自动刷新，一边写代码，保存后自动刷新。 85 | * （我发现在webpack2中`http://localhost:8080/`也可以自动加载不用`-hot`，不知道是不是自己的原因，有错误，请指出！！！） 86 | 87 | -------------------------------------------------------------------------------- /react-ji-chu-zhi-shi/zu-jian-sheng-ming-zhou-qi/README.md: -------------------------------------------------------------------------------- 1 | # 组件生命周期 2 | 3 | -------------------------------------------------------------------------------- /react-ji-chu-zhi-shi/zu-jian-yang-shi/README.md: -------------------------------------------------------------------------------- 1 | # 组件样式 2 | 3 | -------------------------------------------------------------------------------- /react-ji-chu-zhi-shi/zu-jian-yang-shi/react_css_model.md: -------------------------------------------------------------------------------- 1 | # CSS模块化 2 | 3 | * `"babel-plugin-react-html-attrs": "^2.0.0"`让JSX中`className`能变回原来`class` 4 | * webpack要重新配置 5 | 6 | ```javascript 7 | // webpack.config.js 8 | var webpack = require("webpack"); 9 | var path = require("path"); 10 | 11 | module.exports = { 12 | devtool: 'source-map', 13 | context: path.resolve(__dirname, "src"), 14 | entry: "./js/index.js", 15 | output: { 16 | path: path.resolve(__dirname, "dist"), 17 | filename: 'bundle.js' // 打包输出的文件 18 | }, 19 | module: { 20 | rules: [{ 21 | test: /\.js$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译 22 | exclude: /(node_modules)/, 23 | use: [{ 24 | loader: 'babel-loader', 25 | //配置参数; 26 | options: { 27 | presets: ['es2015', 'react'], 28 | plugins: ['react-html-attrs'] 29 | } 30 | }, ] 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: [{ 35 | loader: 'style-loader', 36 | }, { 37 | loader: 'css-loader', 38 | options: { 39 | modules: true, 40 | localIdentName: '[path][name]__[local]--[hash:base64:5]' 41 | } 42 | }] 43 | }, 44 | ] 45 | }, 46 | }; 47 | ``` 48 | 49 | * 在`src/css`下，创建一个`footer.css`，此`css`设置初衷是为了单独去渲染`footer`，希望`footer.css`不会污染全局，但通常情况下全局引用`css`是会污染全局的，内容如下 50 | 51 | ```css 52 | .miniFooter { 53 | background: #333333; 54 | color: #ffffff; 55 | padding-left: 20px; 56 | padding-top: 3px; 57 | padding-bottom: 3px; 58 | } 59 | .miniFooter h1 { 60 | font-size: 15px; 61 | } 62 | ``` 63 | 64 | * 在footer.js下写 65 | 66 | ```javascript 67 | import React from 'react'; 68 | 69 | var footerCss = require("../../css/footer.css");//引入css 70 | 71 | export default class CompomentFooter extends React.Component{ 72 | render(){ 73 | console.log(footerCss); 74 | return( 75 | 78 | ); 79 | } 80 | } 81 | ``` 82 | 83 | * 因为我们在打包时设置了`localIdentName:'[path][name]__[local]--[hash:base64:5]'`，这地方就是引用css的路径限制。 84 | * 默认情况下，CSS 将所有的类名暴露到全局的选择器作用域中。样式可以在局部作用域中，避免全局作用域的样。详细🔎请查看官方文档[官方文档式](https://doc.webpack-china.org/loaders/css-loader/#scope) 85 | * 所以在浏览器中`console`出了`Object {miniFooter: "css-footer__miniFooter--2W_7G"}` 86 | 87 | -------------------------------------------------------------------------------- /react-ji-chu-zhi-shi/zu-jian-yang-shi/react_style.md: -------------------------------------------------------------------------------- 1 | # CSS內联式样 2 | 3 | * 通过header.js演示JSX样式控制,直接內联到标签中的style 4 | 5 | ```javascript 6 | import React from 'react'; 7 | export default class CompomentHeader extends React.Component{ 8 | 9 | render(){ 10 | const styleComponentHeader = { 11 | header: { 12 | backgroundColor: "#333333", 13 | color: "#ffffff", 14 | "padding-top": "15px", 15 | paddingBottom: "15px" 16 | } 17 | //还可以定义其他的样式 18 | } 19 | return( 20 |这里是表头
22 |这里是表头
69 |
29 |
33 | )
34 | }
35 | }
36 |
37 | export default App;
38 | ```
39 |
40 | 此处的性能优化点在于`onClick`所触发的函数，是想在JavaScript中，如下
41 |
42 | ```javascript
43 | 1 == 1 //true
44 | {c:1} == {c:1} //这种情况下是false，因为每次生成的对象，存入到内存的地址是不同的
45 | ```
46 |
47 | 所以在这函数会重复的生成，导致重复render，这个地方就是要优化的点，优化方法如下
48 |
49 | ```javascript
50 | import React from 'react'
51 |
52 | class App extends React.Component{
53 | constructor(props){
54 | super(props)
55 | this.state = {
56 | num:1
57 | }
58 | this.handleClick = this.handleClick.bind(this)
59 | }
60 | handleClick(){
61 | this.setState({
62 | num:this.state.num+1
63 | })
64 | }
65 | render(){
66 | return(
67 | App
30 | 31 | 32 |
68 |
71 | )
72 | }
73 | }
74 |
75 | export default App;
76 | ```
77 |
78 | 这样就是通过在构造函数里声明。不会在每次render的时候重复生成。这个是因为类通过构造函数实例化，在constructor里进行绑定，只用生成一次，后面就可以直接调用。
79 |
80 | ## 组件数据传递
81 |
82 | ```javascript
83 | import React from 'react'
84 |
85 | class App extends React.Component {
86 | constructor(props){
87 | super(props)
88 | this.state={
89 | num:1,
90 | title:'tyrmars',
91 | name:'zhang'
92 | }
93 | this.handleClick = this.handleClick.bind(this)
94 | }
95 | handleClick(){
96 | this.setState({
97 | num:this.state.num+1
98 | })
99 | }
100 | render() {
101 | const
102 | return (
103 | App
69 | 70 |
104 |
108 | )
109 | }
110 | }
111 |
112 | class Demo extends React.Component {
113 | render() {
114 | return (I am App
105 | 106 |I am Demo
) 115 | } 116 | } 117 | 118 | export default App 119 | ``` 120 | 121 | 每次对Demo进行数据传递的时候都会生成一个新的对象 122 | 123 | ```javascript 124 |
27 |
31 | )
32 | }
33 | }
34 |
35 | class Demo extends React.Component {
36 | render() {
37 | return (I am App
28 | 29 |I am Demo，{this.props.title}
) 38 | } 39 | } 40 | 41 | export default App 42 | ``` 43 | 44 | ## React16性能检测 45 | 46 | 通过在浏览器中在链接上加入`/?react_pref`。 47 | 48 |  49 | 50 | 通过此方法可以在浏览器默认的性能监视器Performance中查看性能改变 51 | 52 |  53 | 54 | * test 55 | 56 | 通过定制shouldComponentUpdate来减少组件的render从而优化性能 57 | 58 | 主要就是对比现有的props和state与改变后的不同，如果相同就不会再次渲染 59 | 60 | ```javascript 61 | class Demo extends React.Component { 62 | shouldComponentUpdate(nextProps, nextState){ 63 | if(nextProps.title === this.props.title){ 64 | return false 65 | } 66 | return true 67 | } 68 | render() { 69 | return (I am Demo，{this.props.title}
) 70 | } 71 | } 72 | 73 | export default App 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-06/react-zu-jian-you-hua/purecomponent.md: -------------------------------------------------------------------------------- 1 | # PureComponent 2 | 3 | 还有就是通过使用React.PureComponent来对组件进行优化，这个也是React16官方新加入的，意思类似于纯组件 4 | 5 | 使用的地方一般是在只接收从父组件传递过来数据的组件，也就是只接受props的组件 6 | 7 | ```javascript 8 | class Demo extends React.PureComponent{ 9 | //.... 10 | } 11 | ``` 12 | 13 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-06/reacttong-gou.md: -------------------------------------------------------------------------------- 1 | # React同构 2 | 3 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-06/reduxxing-neng-you-hua.md: -------------------------------------------------------------------------------- 1 | # Redux性能优化 2 | 3 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-07.md: -------------------------------------------------------------------------------- 1 | # 服务端渲染 2 | 3 | ## 服务端渲染介绍 4 | 5 | * 传统的服务端渲染：JSP、smaty、jinja2等 6 | * 浏览器渲染 7 | 8 | ## React服务端渲染主要是浏览器渲染 9 | 10 | * 后端只提供静态资源和接口 11 | * 前端写模板 12 | 13 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-08/README.md: -------------------------------------------------------------------------------- 1 | # 项目应用 2 | 3 | * 文件组织方式 4 | * 模块接口 5 | * 合并reducer 6 | * 其他问题 7 | 8 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-08/react-he-bing-reducer.md: -------------------------------------------------------------------------------- 1 | # React 合并reducer 2 | 3 | 通过一个combineReducers合并所有的reducers 4 | 5 | ```javascript 6 | //合并所有reducer 7 | import { combineReducers } from 'redux' 8 | import { user } from './redux/user.redux' 9 | import { chatuser } from './redux/chatuser.redux' 10 | import { chat } from './redux/chat.redux' 11 | 12 | export default combineReducers({user,chatuser,chat}) 13 | ``` 14 | 15 | 在index中使用reducers来进行数据管理 16 | 17 | ```javascript 18 | import reducers from './reducer' 19 | const store = createStore(reducers) 20 | ``` 21 | 22 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-08/react-mo-kuai-jie-kou.md: -------------------------------------------------------------------------------- 1 | # React 模块接口 2 | 3 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-08/react-wen-jian-zu-zhi-fang-shi.md: -------------------------------------------------------------------------------- 1 | # React 文件组织方式 2 | 3 | ## 常用方式 4 | 5 | * reducer目录包含所有Redux的reducer； 6 | * actions目录包含所有的action构造函数； 7 | * component目录包含所有的展示组件； 8 | * container目录包含所有的容器组件； 9 | 10 | -------------------------------------------------------------------------------- /ying-yong-zhi-shi/react-08/react-wen-ti.md: -------------------------------------------------------------------------------- 1 | # React 问题 2 | 3 | 补全代码，使得如下代码可以实现获取文件夹内文件列表功能（Loading 和 FileList 组件可以不用具体实现，只需补全 Folder 组件的代码）： 4 | 5 | ```javascript 6 | /** 7 | * 使用样例： 8 | *{child}
36 | );
37 | }
38 | }
39 |
40 | Folder.propTypes = {
41 | children: React.PropTypes.element.isRequired
42 | }
43 | ```
44 |
45 |
--------------------------------------------------------------------------------
/ying-yong-zhi-shi/router-01/README.md:
--------------------------------------------------------------------------------
1 | # 路由
2 |
3 | 
4 |
5 |
--------------------------------------------------------------------------------
/ying-yong-zhi-shi/router-01/react_router2.md:
--------------------------------------------------------------------------------
1 | # React-Router2
2 |
3 | ## React Router2
4 |
5 | * 由于对于新版的`Router`的不熟悉，这节开始转向`Router2`和`webpack1`，等待`React-Router4`理解后，我会更新这几章
6 | * [Router](https://github.com/ReactTraining/react-router)
7 | * 以上`Router`采用的是`Router2`
8 | * `Router`中文是路由的意思。
9 | * 路由库`React-Router`。它是官方维护的，事实上也是唯一可选的路由库。它通过管理 `URL`，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。
10 |
11 | ### 基本用法
12 |
13 | * `$ npm install react-router`安装`React-Router`，最新的为`React-Router4`。
14 |
15 | ```javascript
16 | import React from 'react';
17 | import ReactDOM from 'react-dom';
18 | import Index from './index';
19 | import ComponentList from './components/list';
20 | import ComponentDetails from './components/details';
21 | import {Router,Route,hashHistory} from 'react-router';
22 |
23 | export default class Root extends React.Component{
24 | render(){
25 | return (
26 | //这里替换了之前的 Index，变成了程序的入口
27 | -
42 |
- 1 43 |
- 2 44 |
33 |
36 | )
37 | }
38 | }
39 |
40 | export default App
41 | ```
42 |
43 | ## `index.redux.js`
44 |
45 | ```javascript
46 | //aciton
47 | const ADD = 'add';
48 | const REDUCE = 'reduce';
49 |
50 | // reducer
51 | exports.counter = function (state=0,action) {
52 | switch (action.type) {
53 | case 'add':
54 | return state+1;
55 | case 'reduce':
56 | return state-1;
57 | default:
58 | return 10
59 | }
60 | };
61 |
62 | // action creator
63 | exports.add = function () {
64 | return {type:ADD};
65 | };
66 | exports.reduce = function () {
67 | return {type:REDUCE};
68 | };
69 | ```
70 |
71 | * 此种方式耦合程度太高，为了保证组件的独立性做出如下修改
72 | * index.redux.js封装📦了`add`函数，直接import这个函数
73 | * 通过参数形式传递给App.js
74 |
75 | ```javascript
76 | import React from 'react'
77 | import ReactDom from 'react-dom'
78 | import {createStore} from 'redux'
79 | import {counter,add} from './index.redux'
80 | import App from './App'
81 |
82 | const store = createStore(counter)//新建一个store
83 |
84 | function render() {
85 | ReactDom.render(展示dedux数据{num}
34 | 35 |
111 |
115 | )
116 | }
117 | }
118 |
119 | export default App
120 | ```
121 |
122 |
--------------------------------------------------------------------------------
/zhuang-tai-guan-li/redux_use/redux_chrome.md:
--------------------------------------------------------------------------------
1 | # Redux Chrome插件使用
2 |
3 | * 🆕新建store的时候判断window.devToolsExtension
4 | * 使用compose结合thunk和winows.devToolsExtension
5 | * 调试窗的redux选项卡，实时看到state
6 |
7 | ```javascript
8 | import React from 'react'
9 | import ReactDom from 'react-dom'
10 | import thunk from 'redux-thunk'
11 | import {createStore, applyMiddleware ,compose} from 'redux'
12 | import {counter,add,reduce,addAsync} from './index.redux'
13 | import App from './App'
14 |
15 | const store = createStore(counter,compose(
16 | applyMiddleware(thunk),
17 | window.devToolsExtension ? window.devToolsExtension():()=>{}
18 | ))
19 |
20 | function render() {
21 | ReactDom.render(展示dedux数据{num}
112 | 113 | 114 |
105 |
110 | )
111 | }
112 | }
113 |
114 | export default App
115 | ```
116 |
117 |
--------------------------------------------------------------------------------
/zhuang-tai-guan-li/rxjs.md:
--------------------------------------------------------------------------------
1 | # RXJS
2 |
3 |
4 |
5 | ### RxJS的核心概念
6 |
7 | * Observable 可观察的物件
8 | * 代表一组未来即将产生的事件资料（被观察的物件）
9 | * Observer 观察者物件
10 | * 代表一个用来接收【观察结果】的物件（收到的就是事件资料）
11 | * 观察者物件就是一个物件包含3个含有callback函数的属性（next，error，complete）
12 | * Subscription 订阅物件
13 | * 代表正在执行Observable/Observer的执行个体（可用来来取消订阅）
14 | * Operrators 操作者(运算子)
15 | * 必须拥有函数编程中所定义的纯函数（pure funtion）特性（没有副作用的函数式）
16 | * 主要用来处理一系列的事件资料集合
17 | * 常见的运算子包含 map、filter、concat、flatMap 等
18 |
--------------------------------------------------------------------------------