create-react-app创建react项目：
npm install -g create-react-app
create-react-app xxx(项目名称)
package.json->脚手架配置文件；
react仅支持ie8以上；
//https协议的服务器 PWA import registerServiceWorker from './registerServiceWorker';
属性校验 propTypes
属性默认值 defaultProps
props、state、render：
页面加载时render自动执行，props或者state发生改变，render函数重新被执行；
父组件的render被执行，子组件的render也会被执行；
虚拟DOM：在数据发生改变时生成新的DOM，并于原始DOM对比，替换更新的部分；
diff算法：原始虚拟DOM和新虚拟DOM的差异；
ajax请求：异步请求获取数据；
使用模块：axios
react 动画：
css过渡动画 -> react-transation-group
所有组件共享store，通过操作store进行组件更新，无需传递参数； React Components：页面上的所有组件；
Store：数据的公共区域；
1、创建store：
import { createStore } from 'redux';
const store = createStore();
2、创建记录本（所有数据，接收到上一次的state和操作，在reducer内进行过操作返回新的state）：
const defaultState = {}
export default (state = defaultState, action) => {
return state;
}
在reducer内进行操作时不能直接操作state，需要先深度拷贝state在进行操作；
const newState = JSON.parse(JSON.stringify(state));
3、告知数据：
import reducer from './reducer'
const store = createStore(reducer);
4、获得数据：
store.getState();
5、在页面内对store的变化进行监听：
//对store进行订阅
store.subscribe(this.handleStoreChange);
在定义action的type时方便查错可以将其提取出作为常量进行引用；
6、actionCreator 同一管理action：
将需要使用到的action全部写在一个文件，在需要使用的页面进行引入；
PS：想要在chrome使用redux查看工具，需要在创建store时传入参数window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
即：
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
redux重要点：
1）state是唯一的，只用自己能操作自己，其他不能直接操作state；
2）reducer必须要是纯函数（给定固定输入，一定有固定输出，且不会有任何副作用，输入和输出一一映射，不会对其他数据产生影响）；
3）createStore - store.dispatch（派发） - store.getState - store.subscribe（订阅）;
7、redux-thunk中间件：
引入applyMiddleware，在创建store时使用applyMiddleWare引入需要的中间件；
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(ReduxThunk)
);
const store = createStore(reducer, enhancer);
创建一个action，返回一个异步调用的函数，该函数可接收dispatch参数（只有只用使用thunk，action才可以返回一个函数）；
action和store之间，相当于对dispatch方法的封装升级，dispatch的参数可以是函数，如果参数是对象则直接传给store，如果参数是函数则操作函数，如果有需要对store进行操作再进行操作。
8、redux-saga中间件：
sagas.js也可以接收到action；
在容器组件派发action，sagas函数接收该action执行文件内相应的异步请求方法，使用saga的put；
react-redux的使用：
1、安装react-redux；
2、创建store文件：
import { createStore } from 'redux'; import reducer from './reducer' const store = createStore(reducer);
3、创建reducer文件，并传入store：
export default (state, action) => { return state; }
4、在容器组件内引入store，并初始化容器的state；
5、Provider组件，用于连接组件，将Provider与store做连接，Provider内部组件都能使用store的内容，在组件内部使用connect将容器组件与store做连接；
在页面内渲染数据就可以用this.props
UI组件和容器组件：
UI组件负责页面渲染，容器组件负责逻辑；
在绑定函数需要传入参数时不能直接传入，可以采用箭头函数的方法：
onClick={(index) => (this.props.handleDelete(index))}
无状态组件：当一个组件只有render函数可以用无状态组件代替；
无状态组件只是一个函数而非类，没有生命周期，所以性能比普通组件高；
react ui框架：antd
css一旦被引入则会成为全局，不建议直接在js内直接引入css，使用styled-components模块进行样式管理；
将css后缀改成js；
styled-components使用styled进行操作时返回的时一个带样式的标签，样式独享不会对其他页面布局产生影响；
iconfont：创建自己的icon仓库，在iconfont内创建项目并选择自己的图标添加到项目之后下载本地使用；
store数据不能直接被修改，在项目内就必须保证不能发生手动修改的事件 => immutable管理store数据，生成immutable对象不可轻易被改变，保证store的安全性；
const defaultState = fromJS({
inputFocus: false
});
在组件内获取：
inputFocus: state.header.get('inputFocus')
reducer内返回的也必须时immutable对象;
/* 实际不是直接对state进行操作，而是结合原始immutable对象的值
* 和设置的值，返回一个全新的对象
*/
return state.set('inputFocus', action.inputFocus);
使用redux-immutable进行数据格式的统一； actionCreator请求时回去找工程目录下的文件；
react-router:
//exact只有在完全匹配时才显示
<Route path="/" exact></Route>
import React, { Component, Fragment } from 'react';
import '../assets/style/App';
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom'
import store from '../store'
import Header from '../components/header'
class App extends Component {
render() {
return (
<Provider store={store}>
<Fragment>
<Header />
<BrowserRouter>
<Route path="/" exact></Route>
</BrowserRouter>
</Fragment>
</Provider>
);
}
}
export default App;
生命周期：
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount：在组件挂载到页面上，放置接口请求比较合适；
componentWillUnmount