react难点：组件怎么拆分？ 单一原则，只干一件事，功能简单，不复用不拆，考虑迭代

数据放在哪里？

【数据】

props：数据传递

state：私有状态（用户输入、默认属性）

数据尽量给顶层组件

为什么用setState？ 因为虚拟dom没完成更新，且修改的是复制的state

setState：在原来的基础上进行合并，异步，解决：this.setState（function（prevState，props）｛｝）

钩子（获取默认属性）：getDefaultProps、getInitialState

【值类型】

字符 ||｛表达式/arr/json/undefined/number/fn｝

｛json｝报错 ｛json.key｝

【组件渲染】

ReactDom.render（组件，dom）

React.createClass（｛配置｝）

【数据交互】

jQ、原生ajax、fetch

fetch返回的值是二进制的buff流，需要转换res.json（）和res.text（）。返回一个promise。

和fetchjsonp组件 .then（）.catch（）

【css模块化】

使用style.类名

【事件】

ev.target.value

【tips】

1.react 一旦会复用，就做成组件

2.尽量用无状态组件（不能访问this对象，只能访问props，纯函数，无需实例化，性能高）

3.传值思路

a） 子-父-子

b） pub/sub

c） 状态管理

react的生命周期

创建期

getDefaultProps（）

getInitialState（） 初始化state

constructor（props，context） 创建组件调用

componentWillMount（） 挂载前调用 这里调用setState， render更新state并且只渲染一次

componentDidMount（） 组件挂载之后调用一次，子组件页挂载好，可以使用refs

shouldComponentUpdate（nextProps，nextState） 挂载后，每次调用setState都会调用shouldComponentUpdate判断是否需要重新渲染。当数据改变不影响页面展示，可以在这里做判断，优化渲染效率

存在期

ComponentWIllReceiveProps（nextProps） 通过props传入的值和setState修改

componentWillUpdate（nextProps,nextState） 收到新的props和state后调用

componentDidUpdate（） 更新后调用

render（） 核心函数，不要在render中修改state

销毁期

componentWillUnmount（） 组件被卸载时候调用

在react中，触发render的有4条路径：

? 首次渲染Initial Render

? 调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

? 父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）

? 调用this.forceUpdate

react-router（组件式开发）

react-router@4.0版本有巨坑。。以下为3.0版本

路由：（用来url切换导入新的组件）

Router 路由对象

Route 一个理由配置

hashHistory 哈希模式

IndexRoute 默认路由

Link 路由调用

Redict 重定向

browserHistory 历史记录

路由组件设为无状态组件^_^

【展示区】：｛this.props.children｝

路由path=“：aid？a=1&b=2”为下层的

子组件上的路由参数：

this.props.params接收的是｛aid：xx｝

this.props.location.query接收的是 ｛a：1，b：2｝

this.props.location.pathname

【路由跳转】 redirect from=“” to=“”

route path=“*” component=“error”

【激活的路由样式】：

activeClassName=“active”

activeStyle=｛｛background：red｝｝

｛json｝模式

【链接的另一种方式】：

Link to=｛｛pathname：“/news/004”，query：｛a：1，b：2｝｝｝

【函数内路由】

window.history.push（）

browserHistory.push（）

this.props.router.push（“”）；

替换 replace

【browserHistory】

需要在package中配置 —history-api-failback

router设置 history=“browserHistory”