React 新特性(普通)

特性1 => context ：
在我们接触redux之前，当进行父子组件间的传值时，我们的方法是将需要传递的State在父子组件间逐层传递，而在之前我们介绍的redux中，则可以将所有的State托管到store中，而各层组件需要时直接到store中去拿取即可，但在没有使用redux时，State的传递现在便可以使用context进行传递。
=>以下是一张使用context传递State值的表示：

从上我们可以就看出，我们可以将父组件的值跨多层组件直接到需要的子组件中使用:
用法介绍：

1. 导入createContext ： =>

import React, { createContext } from 'react'

2. 创建context, 并且在父组件中使用Provider将需要的值提供给它包裹的子组件;

//createConetxt返回的是一个组件，可以直接使用
const AppContext = createContext()
class App extends React.Component{
	state = {
		value: 0
	}
	render(){
		return (
			//Provider中的value属性即是需要提供给子组件的state
			<AppContext.Provider value={thuis.state.value}></AppContext.Provider>
		)
	}
}

3. 在子组件中使用Consumer去接收这个传递的state:

class Foo extends React.Component{
	render(){
		return(
			//这儿的Consumer中包裹的需要是一个函数，函数的参数值即是父组件中传递过来的值，在函数体中便可以使用这个值
			<AppContext.Consumer>
				value => (
					<div>{ value }</div>
				)
			</AppContext.consumer>
		)
	}
}

特性2 => contextType :
对于context上述的写法，我们在子组件中去接收state值时需要不断的使用Consumer,如果有多个state传递时，有时还需要Consumer的嵌套，这样代码就会很冗余，这时便可以在子组件中使用contextType：

1. 在子组件中去定义contextType去引入父组件的Provider

//contextType为静态属性
static contextType = AppContext

2. 通过contextType引入state :

//这儿的value即是父组件中Provider传递过来的state,此时我们就不必使用Consumer再去导入它，便可以直接使用这个value
const value = this.context

特性3 => lazy异步加载组件:
当我们的页面在初始化渲染时，有些不需要立即显示给用户的组件内容便可以采用异步加载组件的方式去减轻初次渲染的压力，我们的lazy便是解决这个异步加载的:

1. 从react中引入lazy：

import React， { lazy } from 'react'

2. 将需要异步加载的组件放入到 lazy() 函数中，此时 lazy 函数返回的仍是一个组件，在 lazy()中我们需要使用外部导入的组件时，可以使用 import() 进行导入:

const Foo = lazy(() => import('./Foo.jsx'))

3.在父组件中使用 lazy 的组件，这里暂时先不演示，因为此时去使用这个Foo组件会报错，我们需要使用Suspense去填充 lazy 的异步加载状态.

特性4 => Suspense ：
使用Suspense去填充 lazy 的异步加载状态，由于lazy是异步加载的，使用Suspense的目的即是在其加载完成的应该显示的内容，可以理解成lazy加载完成之前Suspense起一个占位的作用:

1. 导入 Suspense:

import React, { Suspense } from 'react'

2. 将lazy加载的组件用Suspense标签包裹,Suspense中有一个fallback属性，值为lazy加载完成前页面显示的内容；

class App extends React.Component{
	render(){
		return (
			<Suspense fallback={<div>loading</div>}>
				//这里的Foo组件及时上一步中lazy加载的组件 
				<Foo />
			</Suspense>
		)
	}
}

特性5 => PureComponent :
我们知道，在class组件中，当组件的state或者是props发生变化时，都会再次调用render()这个生命周期钩子，去重新渲染组件，但是，此时，当我们的父组件发生了变化，而此时子组件并为有任何变动时，仍旧会造成子组件的重新渲染，这样对于性能就会有不必要的损耗，此时我们使用PureComponent便可以在重新渲染时判定子组件是否需要重新渲染，它有点类似子组件中的shouldComponentUpdate()这个生命周期钩子，用法也相对简单，直接将我们的子组件继承的Component改成继承PureComponent即可

class Foo extends React.PureComponent{
	//do something
}

特性6 => memo :
对于class组件时如此，那么对于我们的无状态组件(这里还未引入hooks的概念，所以我们就暂时将function定义的组件叫做无状态组件):它不能够去继承PureComponent，但是我们也需要其有相同的特性，那么我们此时便可以使用memo函数:

1. 引入 memo：

import React, { memo } from 'react'

2. 将我们的无状态组件使用memo函数包裹，memo函数的返回值即是该组件:

const Bar = memo(function Bar(props) {
	return (
		<div>......</div>
	)
})

特性7 => getDerivedStateFromError() 和 componentDidCatch()
由于在组将中，如果出现了某一个组件出错时，可能会导致页面显示空白,
那么以上两个方法便可以在错误边界、在渲染期间、生命周期方法内、以及整个组件树构造函数内捕获错误，当组件发生错误时，可以使用可static getDerivedStateFromError()更新state，可使用componentDidCatch()记录错误信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
    	hasError: false 
    }
  }
  static getDerivedStateFromError(error) {
    //可以在此处更新state中的值
    return { hasError: true }
  }
  componentDidCatch(error, info) {
    // 可以在这个生命周期函数中记录错误信息
    logErrorToMyService(error, info)
  }
  render() {
    if (this.state.hasError) {
      return <h1>Error</h1>;
    }
    return this.props.children; 
  }
}

以上一些新特性都是为之后的hooks组件新特性做准备，React在2018年年底更新的版本中的hooks组件新特性将是React组件开发的一个大改变，我将在我的下一篇博客中介绍到hooks组件的一些特性和使用.