React小书笔记

状态提升

传送门
当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。

在极端的例子下，你会发现这种无限制的提升不是一个好的解决方案。一旦发生了提升，你就需要修改原来保存这个状态的组件的代码，也要把整个数据传递路径经过的组件都修改一遍，好让数据能够一层层地传递下去。这样对代码的组织管理维护带来很大的问题。到这里你可以抽象一下问题：如何更好的管理这种被多个组件所依赖或影响的状态？

于是乎，就可以召唤Redux了。

对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

画树状的组建结构图是一个很好的理清思路的方法

http://huziketang.mangojuice.top/books/react/lesson17

组件挂载

React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。
其实 React.js 内部对待每个组件都有这么一个过程，也就是初始化组件 -> 挂载到页面上的过程。所以你可以理解一个组件的方法调用是这么一个过程：

image.png

这当然是很好理解的。React.js 为了让我们能够更好的掌控组件的挂载过程，往上面插入了两个方法：

image.png

React.js 也控制了这个组件的删除过程。在组件删除之前 React.js 会调用组件定义的 componentWillUnmount：

image.png

一些组件启动的动作，包括像 Ajax 数据的拉取操作、一些定时器的启动等，就可以放在 componentWillMount 里面进行，例如 Ajax：

image.png

“数据加载中...”的实现方式

async 和 await 了解一下。这个是新的一种写异步代码的方式。
Async/Await替代Promise的6个理由

结合componentWillMount就可以实现在数据加载完成之前的数据加载中 样式。

// getPostData 已经可以直接使用
// 小提示：本系统可以直接 async/await

class Post extends Component {
    constructor(){
        super();
        this.state = {
            content:''
        }
    }

    componentWillMount(){
        this._loadData();
    }

    async _loadData(){
        this.setState({ content: '数据加载中...' })
        const content = await getPostData()
        this.setState({ content })
    }

    render () {
        return (
            

                
{this.state.content}
                {this._loadData()}}>刷新
            
        )
    }
}

组件更新

image.png

附：深度剖析如何实现virtual dom

ref 和 react里的DOM操作

在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener 的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 React.js 当中可以直接通过 setState 的方式重新渲染组件，渲染的时候可以把新的 props 传递给子组件，从而达到页面更新的效果。

React.js 这种重新渲染的机制帮助我们免除了绝大部分的 DOM 更新操作，也让类似于 jQuery 这种以封装 DOM 操作为主的第三方的库从我们的开发工具链中删除。

但是 React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框，你需要调用 input.focus() 的 DOM API，比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画，等等。

React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上 ref属性：

Style属性

这个例子挺不错的

组件内容编写规范

image.png

获取评论发出的时间

tip：JavaScript中可以在某个元素前使用 ‘+’ 号，这个操作是将该元素转换秤Number类型，如果转换失败，那么将得到 NaN。
例如这里使用的

createDate: + new Date()

高阶组件

“高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。”

const NewComponent = higherOrderComponent(OldComponent)

“高阶组件的作用，其实就是为了组件之间的代码复用。组件可能有着某些相同的逻辑，把这些逻辑抽离出来，放到高阶组件中进行复用。高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。”（这一章这一部分对于理解如何将不同组件相同的逻辑抽取出来，这一操作有很好的启发，传送门

代码复用的方法、形式有很多种，你可以用类继承来做到代码复用，也可以分离模块的方式。但是高阶组件这种方式很有意思，也很灵活。学过设计模式的同学其实应该能反应过来，它其实就是设计模式里面的装饰者模式。它通过组合的方式达到很高的灵活程度。

手动实现Redux

createStore和dispatch的逻辑

针对每个不同的 App，我们可以给 createStore 传入初始的数据 appState，和一个描述数据变化的函数 stateChanger，然后生成一个 store。需要修改数据的时候通过 store.dispatch，需要获取数据的时候通过 store.getState。

共享结构的对象

浅复制，...state
我们修改 stateChanger，让它修改数据的时候，并不会直接修改原来的数据 state，而是产生上述的共享结构的对象。 stateChanger 不会修改原来对象了，而是返回对象

最后，小书上的例子完成～下一步是希望能做一个完整点的基于react的项目练练手。

---

全文整理自 react小书@胡子大哈