唐霜

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，这样就不会报错了。当然，这里的配合只是我的个人感悟，并非官方强制。