React 基础知识点复习

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”