React及Nextjs相关知识点小结

React及Nextjs知识点小结

函数式组件和类组件区别是什么

1、函数式组件是用于创建无状态的组件，组件不会被实例化，无法访问this中的对象，无法访问生命周期方法，是无副作用的，相比于类组件函数式组件代码可读性更好，减少了大量的冗余代码，可以很方便的创建一个组件
2、类组件是用于创建有状态的组件，该组件会被实例化，可以访问组件的生命周期方法

Component和PureCompoent区别是什么

1、PureCompoent是一个更具性能的Component的版本
除了为你提供了一个具有浅比较的shouldComponentUpdate方法，PureComponent和Component基本上完全相2、同。当props或者state改变时，PureComponent将对props和state进行浅比较。
3、另外，Component不会比较当前和下个状态的props和state。因此，每当shouldComponentUpdate被调用时，组件默认的会重新渲染。

属性Props和States应该在何时使用

组件私有数据时用state  外部数据传入则用props

简单说明React Component的生命周期

react组件的生命周期有四个阶段：初始化、创建阶段、运行阶段和销毁阶段

1、初始化：

construct，初始化state，并且把props转化为state

2、创建阶段：

componentWillMount，相当于 Vue 中的 created，组件将要被挂载，此时还没有开始渲染虚拟 DOM
componentDidMount，相对于 Vue 中的mounted，组件完成挂载，此时，组件已经显示到页面上了，通常我们会在这里请求ajax数据，或是操作dom改变样式

3、运行阶段

componentWillReceiveProps（注：未来17版本中将被弃用）：组件接收到一个新的props时被调用，但也有可能props没有改变的时候也触发，比如父组件更新导致的触发，有时候可能需要比较props是否发生了改变，这个方法在第一次渲染时不会被调用。
shouldComponentUpdate：用于判断组件是否需要被更新，一般在这里做一些性能优化，减少不必要的渲染
componentWillUpdate（注：未来17版本中将被弃用），组件更新之前（componentshouldupdate返回true）时调用
componentDidUpdate，组件更新完成之后调用，此时页面又被重新渲染了， state、虚拟DOM和页面已经保持同步

4、销毁阶段

componentWillUnmount，组件卸载的时候触发，我们可以在这里做一些清除定时器的操作

新增加的钩子函数
1、getDerivedStateFromProps(nextProps,prevState)
新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props(只要父组件重新渲染，那么这个props不论值是否一样都是一个新的props)后调用。它可以返回一个对象来更新state，或者返回null来表示新的props不需要任何state更新。
2、getSnapshotBeforeUpdate()
新的getSnapshotBeforeUpdate生命周期在更新之前被调用（例如，在DOM被更新之前）。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 （这个生命周期不是经常需要的，但可以用于在恢复期间手动保存滚动位置的情况。）

HOC组件是什么，举一个合适使用HOC的例子

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，是一个没有副作用的纯函数。
举个例子，如页面权限控制

// HOC.js
function withAdminAuth(WrappedComponent) {
    return class extends React.Component {
        state = {
            isAdmin: false,
        }
        async componentWillMount() {
            const currentRole = await getCurrentUserRole();
            this.setState({
                isAdmin: currentRole === 'Admin',
            });
        }
        render() {
            if (this.state.isAdmin) {
                return <WrappedComponent {...this.props} />;
            } else {
                return (<div>您没有权限查看该页面，请联系管理员！</div>);
            }
        }
    };
}

页面a
// pages/page-a.js
class PageA extends React.Component {
    constructor(props) {
        super(props);
        // something here...
    }
    componentWillMount() {
        // fetching data
    }
    render() {
        // render page with data
    }
}
export default withAdminAuth(PageA);

什么事RenderProps？举一个合适使用RenderProps的例子

The Render Props是一种在不重复代码的情况下共享组件间功能的方法，Render Props模式的出现主要是为了解决HOC所出现的问题

• 不用担心props命名问题，在render函数中只取需要的state
• 不会产生无用的组件加深层级
• render props模式的构建都是动态的，所有的改变都在render中触发，可以更好的利用组件内的生命周期。

使用场景：
Render Props对于只读操作非常适用，如跟踪屏幕上的滚动位置或鼠标位置

怎样可以知道Nextjs现在的代码是在前端还是后端运行

服务端和客户端本质区别是谁来完成html内容的拼接，如是在服务器端完成的，然后返回给客户端则是服务器端渲染，如果是客户端来拼接页面内容数据，则是客户端渲染。
判断当前页面是客户端还是服务器端渲染有三种方式：
a、可以通过查看Network请求来区分，如果是客户端请求，Respone返回的是Json数据，否则返回的是html格式的内容数据
b、查看源代码，如果页面中展示的数据在源代码中可以看到说明是服务器端渲染，否则是客户端渲染
c、通过 isServer 变量可以判断当前环境是服务端还是客户端

static async getInitialProps(ctx) {
const isServer =  ctx.isServer
}

简单说明Nextjs中页面的生命周期

Next.js为我们提供了一个区别于React的新生命周期——getIntialProps()，这个生命周期是脱离于React的正常生命周期的，不过我们依然可以在组件里正常使用react组件的各种生命周期函数。
getInitialProps ，它用于获取并处理组件的属性，返回组件的默认属性。我们可以在该方法中请求数据，获取页面需要的数据并渲染返回给前端页面。


当页面初始化加载时，getInitialProps只会加载在服务端。只有当路由跳转（Link组件跳转或 API 方法跳转）时，客户端才会执行getInitialProps。
注意：getInitialProps将不能使用在子组件中。只能使用在pages页面中。

static async getInitialProps({ req, query, store }) {
store.dispatch(getPromoItemRequest())
store.dispatch(getHomePageDataRequest())
return {}
}

请说明Router，Link以及location.href在Nextjs中的区别

Router是一个路由对象，提供了route、pathname、query、push、replace等常用的API

<span onClick={() => Router.push('/about')}>here</span>

Link是一个组件，其实现原理是基于Router
组件默认将新 url 推入路由栈中，可以使用replace属性来防止添加新输入

<Link href="/about" replace>
      <a>here</a>
    </Link>

location.href是Js提供的原生跳转方式，相较于 location.href，Router和Link更加的强大和方便

请说明Link中，href和as分别代表什么

href链接跳转的真实路径
as为展现在浏览器上的实际路径,是为了装饰 URL 作用

什么时候才需要使用_app.js及什么东西需要放进_app.js

1、通过重写_app.js文件，我们可以对App组件进行重构，在App组件中加入一些项目中不变的内容，比如页面的布局
2、设置全局公共样式css及状态
3、使用componentDidCatch自定义处理错误

Nextjs中的production ENV（NODE_ENV=production）有什么特别

什么事单元测试及其准则是什么

单元测试(unittesting),是指对_软件_中的最小可_测试单元_进行检查和验证
单元测试准则：

1. 保持单元测试小巧, 快速
2. 单元测试应该是全自动/非交互式的
3. 让单元测试很容易跑起来
4. 对测试进行评估
5. 立即修正失败的测试
6. 把测试维持在单元级别
7. 由简入繁
8. 保持测试的独立性
9. Keep tests close to the class being tested
10. 合理的命名测试用例
11. 只测试公有接口
12. 看成是黑盒
13. 看成是白盒
14. 芝麻函数也要测试
15. 先关注执行覆盖率
16. 覆盖边界值
17. 提供一个随机值生成器
18. 每个特性只测一次
19. 使用显式断言
20. 提供反向测试
21. 代码设计时谨记测试
22. 不要访问预定的外部资源
23. 权衡测试成本
24. 合理安排测试优先次序
25. 为测试失败做好准备
26. 写测试用例重现 bug
27. 了解局限

如何提高单元测试的覆盖率

提升代码质量，高度的单元测试覆盖率是最有效的手段之一
使用优秀的开源单元测试框架，其覆盖率往往很高
高覆盖体现在测试用例覆盖public方法、函数中的if-else等逻辑、参数检查、内部定义等。