唐霜

我认为2018年可能会重点关注点几个技术点：

webGL：web图形处理的终极，特别是3D这个领域，它将直接解决VR、建模、地图，甚至看房、看片等各种web端端视觉问题。如果基于webGL开发应用，那么现在不断讨论的前端视图库，例如react，甚至包括flex、grid布局，都会被碾压。

webRTC：web上的p2p技术，已经实现了接口，不需要自己再跑去node端做p2p集成，连穿透都已经做了，所以简直是逆天的技术。问题在于，你可以用它做什么？当然是区块链，或者类区块链的应用。当然了，用它来代替网络传输也是可行的，例如直播、文件快传，简直了。似乎看到了webOS的新希望。

graphQL：新的数据交互思想，顶替restful称为下一代数据交互接口规则。不过这技术能否带来变革性的改变，还有待观察。

PWA：移动端！移动端！如果web不再加快进入移动端市场，那么相当于落后了10年！什么概念！前端还需要依赖react native这样的技术才能写原生应用，绝对不行，看看桌面端的electron，再看看手机端，唯一的希望就是给予PWA出现一个跨平台的框架。

WebAssembly：逆天的在于，让web直接运行二进制文件，什么概念，就是老爷车和火箭啊！如果方案可行，在手机端的性能如果能大大提升，如果js可以转码，那么手机端还怕啥。

除开这些技术点，大大技术趋势非AI和区块链莫属了。区块链已经火了两年了，但是仍然没有重磅的产品被推出，不知道什么原因。而AI则更多的是强调算法，前端领域基本就不谈论算法问题，也是醉了。之所以不谈论算法，我想很重要的一个原因是js代码对于竞争者而已是可见的，如果你把算法放在前端，对手直接趴来用，秒秒钟赶超你。所以要有一种新的技术来实现对js的黑盒运行，我认为需要借助webasembly和native技术，也就是说，把js编译成不可解码的可执行文件，由一个驱动器去执行这个可执行文件，而如果webassembly可以做到的话就更好了。

react测试利器enzyme有三种渲染方式：shallow, mount, render。shallow渲染叫浅渲染，仅仅对当前jsx结构内的顶级组件进行渲染，而不对这些组件的内部子组件进行渲染，因此，它的性能上最快的，大部分情况下，如果不深入组件内部测试，那么可以使用shallow渲染。mount则会进行完整渲染，而且完全依赖DOM API，也就是说mount渲染的结果和浏览器渲染结果说一样的，结合jsdom这个工具，可以对上面提到的有内部子组件实现复杂交互功能的组件进行测试。render也会进行完整渲染，但不依赖DOM API，而是渲染成HTML结构，并利用cheerio实现html节点的选择，它相当于只调用了组件的render方法，得到jsx并转码为html，所以组件的生命周期方法内的逻辑都测试不到，所以render常常只用来测试一些数据（结构）一致性对比的场景。在这里还提到，shallow实际上也测试不到componentDidMount/componentDidUpdate这两个方法内的逻辑。

在使用react-router做路由的时候，会发现如果直接使用，当你采用一些特殊的overflow元素时，会发现切换页面后scrollbar在原位不动，这导致一些不好的体验，因为用户切换界面常常是要查看全新的内容。之所以产生这个问题，很大的原因是virtual dom带来的负面影响。virtual dom仅利用数据对要生成的dom结构做diff计算，只更新那些改变了的元素。而react-router带来的结果是，仅route内部组件的部分节点发生了变化。所以，对于有scrollbar的那个元素而言，没有变动，scrollbar的位置也不会改变。

解决的办法是创建一个container组件，在这个组件中去执行dom操作，让scrollbar跳转到顶部去：

import { withRouter } from "react-router-dom";
class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            document.getElementById("page").scrollTo(0, 0);
        }
    }
    render() {
        return this.props.children;
    }
}
const PageContainer = withRouter(ScrollToTop);

// ... 下面是渲染部分 ...
<Router>
  <PageContainer>
    {/* 你的正常的渲染内容 */}
  </PageContainer>
</Router>

在react表单里面存在两种组件形式，一种叫controlled component, 一种叫uncontrolled component。controlled的意思是说，你只能通过code去改变组件的状态，比如checkbox，如果是controlled，那么你只能通过code去改变它的选中状态，而不能靠用户点击来修改。而uncontrolled的组件反过来，只能通过用户操作来改变状态，而不能通过code来改变。很可惜，一个react组件，不能在这两个形态之间转换，所以这对你写的code会有影响。

怎么区分呢？很简单，看你的代码是使用defaultValue/defaultChecked还是直接使用value/checked。如果是使用value/checked，那么是controlled，反之则是unconrolled。

另外还有两个属性，disabled和readOnly，这两个属性其实要配合这两种形态来使用。controlled component只和readOnly配合，uncontrolled component只和disabled。如果一个input设置了value属性，但是没有给onChange或readOnly，控制台会有错误提示。这是因为，一个controlled组件，它的创建一定要用于控制，而非为了初始化一个值。这种情况下如果你想在外部去控制它，而不是它的onchange事件中，那么应该添加readOnly，这样就不会报错了。当然，这里的配合只是我的个人感悟，并非官方强制。