本文主要是介绍React中11个设计的瑕疵，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
React 已经很优秀了，但依旧有很多可以改善的小细节。
1. 技术选型
React/Vue/Anguler.都是一条单行道，当我们这个项目做好了框架的选型之后，你基本在几年内就没法切换了，顶多只能切换同类型的框架，比如 React，在移动端我们可以用 Preact。
2. 学习成本
时至今日，如果你在 NPM 上搜索 React 你会发现已经有91008个包了。生态繁荣是好事，但也意味着同一个问题可能会有很多种解决方案。这在无意间就提升了我们的学习成本。
另外，React每年都保持着一个高频率的更新，比如今年的 hook 对于前端来说又是一次理念上的革新。React 是改善 UI 体验的领头者，也是在前端多种概念的创造者。
3. 兼容性问题，但问题不大
React 无法兼容低版本的老式浏览器，然而国内经常还是看见有这部分的需求。
4. this 问题
绑定事件的 this 问题，在 react 存在很久了。早在前端对于 this 的理解参差不齐的时候，很容易就在这里采坑出错。
现在我们常用的是在构造函数中 bind 绑定，也有直接箭头函数绑定，还出现了很多 autobind 这样的绑定this工具库。但为什么 React 不能帮我们自动绑定 this 呢？
而官方不帮我们自动绑定 this，主要归咎于 JS 自身的语法问题。
5. 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，难以维护。
6. 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 里去执行。可以在下方留言表达你的看法。
7. 合成事件
在 React 中，我们获取的事件并不是原生事件而是合成事件，合成事件初衷是为了提升性能。但也会带来一些问题。
class SyntheticEvent extends React.component {handleClick = (e) => {console.log(e);setTimeout(() => {console.log(e); // 无法访问})}
}
那我们要如何才能访问到呢？React 给我们提供了一个接口。Event Pooling
class SyntheticEvent extends React.component {handleClick = (e) => {console.log(e);e.persist(); // 放弃合成事件setTimeout(() => {console.log(e); // 正常访问})}
}
除了异步中不能访问 event 以外，还有事件冒泡的问题。
class SyntheticEvent extends React.Component {componentDidMount() {const btn = document.getElementById('test')!;btn.addEventListener('click', () => {console.log('document bind');});}handleClick = (e) => {console.log('点击了');e.stopPropagation();};render() {return (<button id="test" onClick={this.handleClick}>click</button>);}
}stopPropagation 是没法阻止我们冒泡到 document 的。这是因为 React 对事件的处理都是冒泡在 document 在执行。但如果我们真的需要阻止这样的我们应该如何做呢？
handleClick = (e) => {console.log('点击了');e.nativeEvent.stopImmediatePropagation();};
我们可以通过 nativeEvent 拿到原生事件，然后调用原生的stopImmediatePropagation来阻止document 上的事件。
最后，react 的合成了所有的事件是否是最优化呢？
在类 React 框架中有一个性能最优化的框架叫 Inferno. 它对事件的处理则是处理部分的事件作为合成事件，其余依旧为原生事件。源码在这里
8. 事件绑定传参问题
当我们想在一个事件传递多个参数的时候，这在 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
9. render()
我敢打赌，99%的组件我们至少都需要用到props。那为什么React官方团队不能自动的每次把 props 和 state 都自动的注入到 render 方法里呢？像这样
render(props, state) {return <div></div>
}
10. 富交互应用
试想一下假设你需要实现一个类似微信读书的应用。上面有划词标记，划词备忘录，划词锚点，自定义选区编辑等大量需要跟DOM打交道的需求。这时候我们单纯用VM的方式其实非常难实现。无论如何我们都会多生命周期进行大量的DOM事件操作。这对于React来说，或者别的MVVM框架来说都并不是那么的擅长。
也就是说，任何需要我们必须大量操作DOM的需求，我们虽然都能实现，但是依旧是以一种很“不舒服”的方式进行实现。
11. 组件复用/逻辑复用
组件复用和逻辑复用，一直是React长久以来的探索。从最早的mixin -> HOC && Render props。一直都是React的软肋。
mixin就不说了，在中大型应用中使用mixin就是噩梦。天知道你会被谁注入了什么。
HOC是我们长久以来逻辑复用的最佳实践，然而大量使用HOC，导致我们项目无意间多出了许许多多无用层级的DOM，无意义的内存浪费。对于强迫症来说审查元素进行调试也是一件非常恶心的事情。
而render props也只是另一种围魏救赵的方式罢了，虽然也完成了我们组件复用和逻辑复用的使命，但一不小心我们就可能陷入了render callback hell。
而这些所有的问题，我们都可以在hook里被更完美更优雅的解决。
React已经非常优秀了，但它还再变得更好。
原文https://mp.weixin.qq.com/s/w1VEMNS2KC-hsyds1gvlnA
这篇关于React中11个设计的瑕疵的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
