React填坑

Posted 2023-04-24

参考技术A 在浏览器环境下，DOM操作远比JS操作开销大，且项目越复杂，DOM操作的开销越大，为了提升DOM渲染的效率，需要遵循的原则是尽量减少DOM操作。于是Virtual Dom横空出世！
Virtual Dom顾名思义，是使用JS模拟DOM结构；并把DOM变化的对比，放在JS层来做，以此来提高重绘性能（将开销大的Dom操作转化为高效的JS操作）

snabbdom为virtual dom的一个实现库，其核心API有2：
h() ：创建virtual dom
patch(vnode, mewnode) ：渲染前对比两个虚拟节点后并完成真实渲染

virtual dom中（React、Vue）的diff算法起源于Linux的 diff 命令，用于比对文本的不同之处，是一个古老的命令。在virtual dom操作中，找出需要重新渲染的节点的过程，就是React中的diff算法。

在React中负责VIew的编写，其本质上是语法糖，由于浏览器无法识别JSX，实际运行时由React库中的核心函数 React.creatElement 将JSX翻译成JS，再由JS渲染为html，类似于virtual dom经由 h() 转为真实节点一样。
React首次渲染时，调用 patch(container, vnode)
通过 setState() 函数再次渲染时，调用 patch(newVnode, vnode)

React开发时，一个很奇妙的事情就是当 state 或 props 未发生改变时，组件依然会重新渲染，所以当追求性能的时候， shouldComponentUpdate 就派上了用场。 shouldComponentUpdate 生命周期函数是重渲染时 render() 函数调用前被调用的函数，它接受两个参数： nextProps 和 nextState ，分别表示下一个 props 和下一个 state 。并且，当函数返回 false 时候，阻止接下来的 render() 的调用，阻止组件重渲染，而返回 true 时，组件照常重渲染。

在组件生命周期中，设立标志位来检验组件是否挂载，可规避此警告

在并不复杂的webapp中，其实是可以不用redux的！

react中，当父组件通过props向子组件传递数据时，当父组件更新时，子组件会重新render，注意是重新render，子组件并不会完成卸载——加载过程，因此，constructor构造函数并不会再次执行，通过 this.state 语句自然不会传入props的值。这种情况下，子组件可以定义为“无状态”组件，直接使用this.props.data即可。

修改引用型对象是一样不安全的行为

可以使用ES6方法生成指向不同内存地址的新对象（concat()，...均可），可以使操作对象的行为变得相对安全，但是这种不断新开辟内存的行为会增大系统的开销，此时immutable.js隆重登场 ，其核心思想为，对象一经创建，其不会被改变；无论对其进行什么操作，都返回一个新对象；老对象始终不变，而新对象通过树形结构共享原则，既保留原来对象不变，又保留变化的这个部分，而因为每次变化仅为一部分，避免了深拷贝带来的性能损耗，同时可以进行任意时刻的数据回溯。

用于建立store和actions的连接，使reducers可以接收到发出的actions，从而改变store中的数据，即将action和reducer都绑定在一个实例上。connect()接受4个参数：

Mobx数据流相较Redux而言，概念更少。Mobx基于一份数据进行修改（Redux数据基于浅拷贝，每次更新都生成新的数据对象，但是由于浅拷贝和虚拟DOM的存在，对于整体性能的影响有限），因其对store数据的修改可以使用JS修改普通对象的方式，过程比较灵活（不严谨）。

从React15.5起，React内置的类型检测库开始作为独立的存在，开发者可以通过‘prop-types’类型检测库捕获更多的bug，PropTypes 输出了一系列的验证器，可以用来确保接收到的参数是有效的。当给 props 传递了一个不正确的值时，javascript控制台将会显示一条警告。

当使用路由切换时，不同的路由下对应的同一个组件 ，这时候React并不会重新渲染组件，此时只是传入的props有了一定的变化，这时需要利用React的钩子方法： componentWillReceiveProps ，通过比对props，来完成新数据的获取，进而重新渲染组件。

react-native填坑--react-navigation

Navigator已经被React Native废弃了。也许你可以在另外的一个依赖库里react-native-deprecated-custom-components里找到。不过既然官方推荐的是react-navigation那我们就来看看这个东西到底有什么好的，值不值得用。

react-navigation包括下面三个Navigator：

• StackNavigator: 这个组件是用来代替之前的Navigator的。凡是维持一种“先进后出”的栈式导航的话就可以用这个。
• TabNavigator：这个组件和iOS的`TabBarController。看起来是这样的。
• DrawerNavigator：这个组件就是抽屉式的导航菜单。在React Native里只有Android才有：DrawerLayoutAndroid，在iOS里是没有的。有了DrawerNavigator，两个平台都可以用了。

最简单的用法：

import { StackNavigator } from "react-navigation";
export default NavHome = StackNavigator({
  Home: {
    screen: NavApp,
  },
  Message: {
    screen: MessageContainer,
  },
})

实现页面间的跳转：

StackNavigator(RouteConfigs, StackNavigatorConfig)我们需要配置navigationOptions

//App.js 页面
<Button onPress={this.props.navigation.navigate(‘Message‘)} title={‘To message‘} />

//MessageContainer.js
<Button onPress={this.props.navigation.goBack()} title={‘Go Back‘} />

Home: {
    screen: App,
    navigationOptions: ({navigation}) => ({
      title: ‘Home‘,
      headerLeft: (<Button onPress={() => navigation.navigate(‘DrawerToggle‘)} title={‘User‘} />),
      headerRight: (<Button onPress={() => navigation.navigate(‘Message‘)} title={‘Message‘} />),
    })
},