使用 react 系列 总结

从我毕业到如今也差很少快一年半了，想要找个地方沉淀下本身，同时也但愿大佬们，指出我错误的思考。 我直接把我本身写的 ppt 的东西复制过来了

特色

1.声明式设计 −采用声明范式，能够轻松描述应用。

2.高效 −经过对DOM的模拟，最大限度地减小与DOM的交互。

3.灵活 −能够与已知的库或框架很好地配合。

4.组件 − 经过 React 构建组件，使得代码更加容易获得复用，可以很好的应用在大项目的开发中。

5.单向响应的数据流 − React 实现了单向响应的数据流，反作用少，易于追踪问题和维护
复制代码

定义组件的多种方式

createClass

// es5 环境下
var Contacts = React.createClass({  
  render() {
    return (
      <div>1</div>
    )
  }
})
复制代码

React.Component

// es6 方式须要编译
class Contacts extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        return <div>1</div>
    }
}
复制代码

无状态函数式组件

// 适合纯渲染组件
const Contacts = (props) => <div>1</div>
复制代码

生命周期

贴张官方图

各阶段函数说明

Mounting(挂载)

• getDefaultProps：获取默认 props
• getInitialState | | constructor: 都是定义默认的 state，只不过是两种定义组件的方式
• componentWillMount: 即将废弃,在render以前调用，因此就算在这个方法中调用setState也不会触发从新渲染（re-render）
• render: 最核心的方法: 返回须要渲染的东西
• componentDidMount：
  1. 此时已获取到真实 dom， jquery 。
  2. 不过通常都用作 数据请求，此时 setState 能够从新触发渲染
  3. 若是一个组件有兄弟组件、父子组件那么执行该方法的顺序：排在面的子组件， 全部子组件执行完再父亲组件，都是由于递归渲染的特性

Updating(更新) _{将会在 props或 state 更新后调用}

• componentWillReceiveProps: 即将废弃， 由 getDerivedStateFromProps 替代,更新 state 的值、比较 nextProps和 this.props 避免重复渲染
• shouldComponentUpdate: 判断组件是否应该从新渲染，默认为 true，主要用于性能优化
• componentWillUpdate: state 或者 props 更新后 re-render 以前调用。不能够在此 setSate ， 会溢出栈形成浏览器卡死 render()
• componentDidUpdate：能够操做dom 发起 网络请求

卸载阶段

componentWillUnmount: 当咱们的组件被卸载或者销毁了就会调用，咱们能够在这个函数里去清除一些定时器，取消网络请求, 在 spa 中比较常见

组件通讯

父子： 经过 props
子父： 回调函数，经过更新 父亲的 state 来更新
子子： 1. emit 的方式 发布订阅 2. 经过父亲组件来中转
跨层级组件：context context是一个全局变量,像是一个大容器,在任何地方均可以访问到。
可是 当中间某个组件 shouldComponentUpdate 设置为 false 的时候就 gg 了。
缘由是 shouldComponentUpdate 会切断子树的 rerender，当 state 或 props 
没有发生变化时，可能意外中断上层 context 传播。也就是当 shouldComponentUpdate
返回 false 时，context 的变化是没法被底层所感知的。
三方状态库： redux、rematch (二次封装redux)、mobx、smobx，
这些东西借助一句话，"若是你不知道是否须要 Redux，那就是不须要它。"    
复制代码

redux 🌰

三大原则

• 单一数据源
• State 只读的 （此处可能会有歧义）
• 用纯函数执行修改

结合 react 使用， 一张我画的简图表明我的理解

核心概念

参考阮一峰大大

路由

参考我这篇文章

更多

• 高阶组件
• graphql
• react native
• 函数式编程

结语

2019 年基本计划是 写一个不错的我的项目， 同时有机会去了解下底层实现，也去学习 vue 对比下。 欺骗一下本身： 新的一年，新的本身