React实践中的一些笔记-CSDN博客

最近依旧在搞React这块的开发。下面是自己开发实践过程中一些笔记：

新版React不再推荐对象的方式去改变

this.setState({
  a: 1
})
复制代码

推荐异步函数的形式代替对象传入setState中

this.setState((prevState) => {
  return {
    a: prevState.a + 1
  }
})
复制代码

其中preState 等价于this.state

想在最外层包一层，但又不想被显示。可以试试React16引入的Fragment。一个JSX空标签
ref={(input) => { this.input = input }}这种使用ref获取dom，一定要记得setState是异步的
说到React ref,React16.3加入了新的React.createRef API。目前获取ref dom元素有三种方法 1）String Ref 2）Callback Ref 3）React.createRef React官方表示String Ref将会在未来版本被移出，建议用户使用Callback Ref、React.createRef来代替 String Ref一些问题:
1. React元素在创建和更新的过程中，定义成String类型的ref会被封装为一个闭包函数，等待commit阶段被执行，这样会对React性能产生一些影响。
2. String Ref无法被组合，当父组件已经给子组件传递了ref，那么我们就无法再在子组件上添加ref了, Callback Ref方式便可避免。
3. 在根组件上使用无法生效。
另外，React16还另外提供了一个关于ref的API React.forwardRef，主要用于穿过父元素直接获取子元素的ref。
生命周期中componentWillReceiveProps。没有props参数是不会执行的，只有父组件接受了props才会执行，只要父组件render函数重新执行了，子组件componentWillReceiveProps就会执行。
可以通过React16生命周期中componentDidCatch，创建一个error-boundary，用来捕获其内嵌套的组件生命周期发生的错误。（* 无法捕获异步以及事件回调引发的错误）
便捷的深拷贝 JSON.parse(JSON.stringify(obj))
判断两个对象是否相等，如果项目中没有使用immutable.js，可以引入lodash.isequal
```
import isEqual from 'lodash.isequal'
isEqual(obj1, obj2)
复制代码
```
Redux reducer可以接受state，但绝对不能修改state；store必须是唯一的；只有store才能改变自己的内容；reducer必须纯函数不能有副作用；state在其他地方只读只有在store中才能修改。每一块功能拆分一个小store，通过combineReducers合并。每一个功能(组件)的store可以使用这样的模板：

其中index.js可以这么写

import reducer from './reducer'
import * as actionCreators from './actionCreators'
import * as constants from './constants'

export { reducer, actionCreators, constants }
复制代码

use redux chrome tool

import { createStore, compose, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(reducer, composeEnhancers(
  applyMiddleware(thunk)
))

export default store
复制代码

this.props.children可以读取组件下的子节点。this.props.children可以用React.Children.map遍历子节点，好处是不用担心数据类型是undefined还是Obj
在项目中最好分离开业务组件和UI组件。UI组件能写成Stateless方式还是要写成这种方式以提高性能。
Styled-components

Styled-components，可以说是css in js上的又一种尝试。让样式也组件化同时逻辑组件和展示组件分离。使用styled-components不需要再使用className属性来控制样式，而是将样式写成更具语义化的组件的形式。Styled-components的写法可以让样式暴露props让外层JS去控制。这样我们就不需要ClassName、style这样的中间人。

此外Styled-components支持全部Css特性，归根结底本质还是css，什么动画、伪类都不在话下。还有一个优点就是，我们不再需要考虑className命名问题。使用Styled-components会给生成的React组件添加一个值为随机字符串的className。使用同一个Styled-components生成的多个React组件的className是不同的，这种随机className的机制使得组件之间的className值不会冲突，从而解决了CSS全局作用域的问题，也省去了命名的麻烦。

这种控制样式的编程方式不光能解决CSS全局作用域的问题，而且移除了样式和组件间的映射关系真的好用。
Immutable.js，它弥补了Javascript没有不可变数据结构的问题。由于是不可变的，可以放心的对对象进行任意操作。在全局使用之后，我们就不用担心引用类型的变量所引发的一系列副作用咯。需要注意的点：
1. 既然全局使用了immutable.js，再生成新数据，获取新数据传递到action之前一定要注意将其转化成immutable（大部分情况使用fromJS就好:fromJS会包裹一个JS对象使其变成immutable对象。（内部的对象也会变））总结一句话就是：同一类型，才不会出错;
2. pureComponent和immutable.js完美契合可以放心大胆的用。
实现react页面之间的异步加载操作可以尝试使用react-loadable这个组件

以上~~~~