React中的9个设计的瑕疵

#react

前言

本文出自于上海FD 2019 讲师Lucas,视屏地址为 https://m.lizhiweike.com/lecture2/12498341. 里面例子也取自于此。我选取了部分容易分享的以及加入了一些别的元素。也删除了部分不容易解释的内容,作为自己的一个记录便于分享。

1. 学习成本

时至今日,如果你在 NPM 上搜索 React 你会发现已经有91008个包了。生态繁荣是好事,但也意味着同一个问题可能会有很多种解决方案。这在无意间就提升了我们的学习成本。

另外,React每年都保持着一个高频率的更新,比如今年的 hook 对于前端来说又是一次理念上的革新。React 是改善 UI 体验的领头者,也是在前端多种概念的创造者。

2. this 问题

绑定事件的 this 问题,在 react 存在很久了。早在前端对于 this 的理解参差不齐的时候,很容易就在这里采坑出错。

现在我们常用的是在构造函数中 bind 绑定,也有直接箭头函数绑定,还出现了很多 autobind 这样的绑定this工具库。但为什么 React 不能帮我们自动绑定 this 呢? 而官方不帮我们自动绑定 this,主要归咎于 JS 自身的语法问题。

3. setState 异步 or 同步?

我们都知道 React 为了性能考虑 setState 是异步更新的。但是如果脱离了 react 的掌控范围之内则是同步的。

class App extends React.Component {
  state = {
    count: 0
  };

  componentDidMount() {
    const btn = document.getElementById('test');
    btn.addEventListener('click', this.handleClick);
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      <button id="test" onClick={this.handleClick}>
        click
      </button>
    );
  }
}

如果在项目中分散了各种这样混合的代码,很可能让你获取到不被期望的state,难以维护。

4. setState callback hell

想象一下,时常我们需要获取最新的状态而做某些事情,那我们就只能在 setState 的 callback里来做。但是为什么 react 不直接提供 promise 的版本呢?

class CallbackHell extends React.component {
    handleClick = () => {
        this.setState({}, () => {
            doSomething()
            this.setState({}, () => {
              doOtherSomething()
            })
        })
    }
}

搜一下 PR 不难发现,其实早在2017年就有人提过了类似的问题。https://github.com/facebook/react/pull/9989/commits/b5da0b3aff4ecbbdff4ba264f2f6ee33afeb4899

PS:笔者的猜测可能是因为 react 官方不希望把这些 callback 放入 microtask 里去执行。

5. 合成事件

在 React 中,我们获取的事件并不是原生事件而是合成事件,合成事件初衷是为了提升性能。但也会带来一些问题。

class SyntheticEvent extends React.component {
    handleClick = (e) => {
        console.log(e);
        setTimeout(() => {
            console.log(e); // can't get event
        })
    }
}

那我们要如何才能访问到呢?React 给我们提供了一个接口。Event Pooling

class SyntheticEvent extends React.component {
    handleClick = (e) => {
        console.log(e);
        e.persist(); // call persist()
        setTimeout(() => {
            console.log(e); // success
        })
    }
}

除了异步中不能访问 event 以外,还有事件冒泡的问题。

class SyntheticEvent extends React.Component {
  componentDidMount() {
    const btn = document.getElementById('test')!;
    btn.addEventListener('click', () => {
      console.log('document bind');
    });
  }

  handleClick = (e) => {
    console.log('click');
    e.stopPropagation();
  };

  render() {
    return (
      <button id="test" onClick={this.handleClick}>
        click
      </button>
    );
  }
}

stopPropagation 是没法阻止我们冒泡到 document 的。这是因为 React 对事件的处理都是冒泡在 document 在执行。但如果我们真的需要阻止这样的我们应该如何做呢?

  handleClick = (e) => {
    console.log('click');
    e.nativeEvent.stopImmediatePropagation();
  };

我们可以通过 nativeEvent 拿到原生事件,然后调用原生的stopImmediatePropagation来阻止document 上的事件。

关于合成事件的几个问题

React 的合成了所有的事件是否是最优化呢?

在类 React 框架中有一个性能最优化的框架叫 Inferno. 它对事件的处理则是处理部分的事件作为合成事件,其余依旧为原生事件。源码在这里

合成事件我们知道为了性能优化,那react会存储多少个合成事件呢?

源码 可以从这里发现,React设置了一个 EVENT_POOL_SIZE 的常量。所以这就是存储的个数。

那还一个问题,我们有各种各样的事件,react是把所有的事件都放在一起复用吗?

react事件

显然不是。React封装了这么多种类型的事件,每一个都继承于SyntheticEvent,所以每一种类型的事件都会存有EVENT_POOL_SIZE个以便于事件的复用。

6. 事件绑定传参问题

当我们想在一个事件传递多个参数的时候,这在 React 里也是非常的恶心。通常我们是用箭头函数或者直接用bind(this, params)。

而在这一点在 inferno 里就做的很棒,提供了一个linkEvent的接口,不仅解决了 params的问题,还能解决 this 的问题。

import { linkEvent, Component } from 'inferno';

function handleClick(instance, event) {
  instance.setState({ data: event.target.value });
}

class MyComponent extends Component {
  render () {
    return <div><input type="text" onClick={ linkEvent(this, handleClick) } /><div>;
  }
}

https://github.com/infernojs/inferno/blob/master/README.md#linkevent-package-inferno

7. render()

我敢打赌,99%的组件我们至少都需要用到props。那为什么React官方团队不能自动的每次把 props 和 state 都自动的注入到 render 方法里呢?像这样

render(props, state) {
    return <div></div>
}

8. 富交互应用

试想一下假设你需要实现一个类似微信读书的应用。上面有划词标记,划词备忘录,划词锚点,自定义选区编辑等大量需要跟DOM打交道的需求。这时候我们单纯用VM的方式其实非常难实现。无论如何我们都会多生命周期进行大量的DOM事件操作。这对于React来说,或者别的MVVM框架来说都并不是那么的擅长。

也就是说,任何需要我们必须大量操作DOM的需求,我们虽然都能实现,但是依旧是以一种很“不舒服”的方式进行实现。

PS: 笔者之前在实现富文本选区加锚点可以评论的需求。就有过类似的问题。也是没有办法在生命周期中去获取selection和range对象来做。

9. 组件复用/逻辑复用

组件复用和逻辑复用,一直是React长久以来的探索。从最早的mixin -> HOC && Render props。一直都是React的软肋。

mixin就不说了,在中大型应用中使用mixin就是噩梦。天知道你会被谁注入了什么。

HOC是我们长久以来逻辑复用的最佳实践,然而大量使用HOC,导致我们项目无意间多出了许许多多无用层级的DOM,无意义的内存浪费。对于强迫症来说审查元素进行调试也是一件非常恶心的事情。

而render props也只是另一种围魏救赵的方式罢了,虽然也完成了我们组件复用和逻辑复用的使命,但一不小心我们就可能陷入了render callback hell。

而这些所有的问题,我们都可以在hook里被更完美更优雅的解决。

PS: 下一篇继续从hook开始介绍,基于mobx的项目我们可以如何快速切换到hook。

React已经非常优秀了,但它还再变得更好。