ReactJs 高级特性

1.函数组件：函数组件和class组件的区别是：函数组件没有生命周期，没有实例，没有state，纯函数，输入props，输出JSX，不能扩展其他方法

// 函数组件写法
function Writer(props) {
	const {textData} = props
	return (
		<WriterWrapper>{textData}</WriterWrapper>
	)
}

// class组件写法
class Writer extends PureComponent {
 	render() {
 		const {textData} = this.props
 		return (
 			<WriterWrapper>{textData}</WriterWrapper>
 		)
 	}
}

export default Writer;

2.受控组件：受控组件的意思就是元素的值和state里定义的属性是相关联的。只要state改变，页面就会重新渲染。React是没有v-model的，只能自己手动实现。
非受控组件：就是和受控组件意思相反，元素上的值不受state的控制。想要获取元素的值，只能手动操作元素去获取元素的值。利用ref去获取元素，元素需要设置默认值defaultValue或者defaultChecked，例如上传文件的标签

3.Portals：中文意思传送门，主要应用于偏UI的组件，例如：某个组件里有个元素是固定定位。那么这个元素的位置应该在body节点下面，但是这个元素层级比较深，这时候用Portals把这个元素提取到body节点下面。ReactDOM.createPortal(元素, body节点)
还有当父元素有overflow：hidden样式时也可以利用此方法。
还有当父元素的z-index值比较小的时候，也可以利用此方法。

// 引入ReactDOM
import ReactDOM from 'react-dom'
// ReactDOM.createPortal(组件，dom)
function Writer(props) {
	const {textData} = props
	return (
		ReactDOM.createPortal(
			<Consumer>
				{(data) => 
					<WriterWrapper>{textData} {data}</WriterWrapper>
				}
			</Consumer>,
			document.body
		)
		
	)
}

4.context上下文：当有某些公共信息需要传递给每个组件时使用。

// 创建一个context对象 Provider是提供者，Consumer是消费者
export const {Provider,Consumer} = React.createContext("默认名称");
// 用Provider标签将要共享这个数据的组件包裹起来，在value这个字段将要传递的数据传递出去，这个数据可以是任何类型对象、数组、字符串
class Home extends PureComponent {
	constructor() {
		super()
		this.state = {
			commonData: 'light'
		}
	}
	render() {
		return (
			<Provider value={this.state.commonData}>
				<HomeWrapper>
					<HomeLeft>
						<img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
						<Topic />
						<List />
					</HomeLeft>
					<HomeRight>
						<Recommend />
						<Writer textData={this.state.text} />
						{/* <Uncontrol /> */}
					</HomeRight>
					{ this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>顶部</BackTop> : null}
				</HomeWrapper>
			</Provider>
		)
	}
}
// 消费者
// 引入父组件的Consumer容器
import { Consumer } from "../index"; 
// 用Consumer标签将组件内容包裹起来，组件里的内容要在回调函数里
function Writer(props) {
	const {textData} = props
	return (
		<Consumer>
			{(data) => 
				// 这里data就是提供者传过来的数据light
				<WriterWrapper>{textData} {data}</WriterWrapper>
			}
		</Consumer>
	)
}
export default Writer;

5.异步组件
import()
React.lazy
React.Suspense

const Writer = React.lazy(() => import('./components/Writer'))

<React.Suspense falback={<div>加载中...</div>}>
							<Writer textData={this.state.text} />
						</React.Suspense>

6.高阶组件HOC、Render Props，组件公共逻辑抽离
HOC接收一个组件，返回一个组件，HOC高阶组件里放公共逻辑，将接收进来的组件包裹起来并返回，数据按正常传值去传。 {…this.props} 加这个可以透传从HOC的父组件传进来的props数据。Vue透传所有属性$props v-bind。
React-redux里的connect就是高阶组件：
Const VisibletodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList)

Render Props也是先定义一个公共组件，子组件里引入公共组件，传一个render函数给公共组件，在公共函数里将state作为props传递给render函数，执行render函数并返回。