React及Nextjs相关知识点小结

React及Nextjs知识点小结

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

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

Component和PureCompoent区别是什么

一、PureCompoent是一个更具性能的Component的版本
除了为你提供了一个具备浅比较的shouldComponentUpdate方法，PureComponent和Component基本上彻底相二、同。当props或者state改变时，PureComponent将对props和state进行浅比较。
三、另外，Component不会比较当前和下个状态的props和state。所以，每当shouldComponentUpdate被调用时，组件默认的会从新渲染。

属性Props和States应该在什么时候使用

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

简单说明React Component的生命周期

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

一、初始化：

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

二、建立阶段：

componentWillMount，至关于 Vue 中的 created，组件将要被挂载，此时尚未开始渲染虚拟 DOM
componentDidMount，相对于 Vue 中的mounted，组件完成挂载，此时，组件已经显示到页面上了，一般咱们会在这里请求ajax数据，或是操做dom改变样式

三、运行阶段

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

四、销毁阶段

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

新增长的钩子函数
一、getDerivedStateFromProps(nextProps,prevState)
新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props(只要父组件从新渲染，那么这个props不论值是否同样都是一个新的props)后调用。它能够返回一个对象来更新state，或者返回null来表示新的props不须要任何state更新。
二、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

一、经过重写_app.js文件，咱们能够对App组件进行重构，在App组件中加入一些项目中不变的内容，好比页面的布局
二、设置全局公共样式css及状态
三、使用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等逻辑、参数检查、内部定义等。