react设计模式
一. 有状态组件（stateful）与无状态组件（stateless）
有状态组件使用class声明，内部有state状态，在生命周期中可以改变state。无状态组件也称为函数式组件，函数只有一个props参数，然后返回渲染结果。
有状态组件例子如下：
import React from 'react';
export class A extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({show: !prevState.show}));
}
render() {
return (
<div>
{this.state.show && <span>hello world</span>}
<button onClick={this.handleClick}>click</button>
</div>
);
}
}
export default A;
无状态组件不会产生组件实例，主要用于展示，复用性较高
import React from 'react';
const Button = props =>
<button onClick={props.onClick}>
hello world
</button>;
export default Button;
二. 受控组件（controlled）非受控组件（Uncontrolled）
受控组件： 像<input>,<textarea>这些表单元素通常会保持自己的有状态并根据用户的输入更新，在React中通常将状态保存在组件的state属性中，并且仅使用setState()更新。这种由React控制其值的输入表单元素称为“受控组件”。可以将高阶组件看做一个加工厂，把一个组件送入工厂加工改造后然后输出一个新组件。
class ControlledInpute extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
非受控组件：非受控组件在dom中保留了数据，可以通过操作dom获取value,这样做虽然减小了一丢丢代码量，但是将React代码和非React代码混在了一起，虽然快速但是对于有代码洁癖的人来说不能忍。总之尽量使用受控组件。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" defaultValue="Bob" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
注意：
（1）使用React.createRef需要将react 和react-dom升级到最新版本，笔者的react版本为16.4.2 react-dom版本为16.4.2否则会抛出 React.createRef() causing error 'expected ref to be function or string'这样的错误
（2）由于函数式组件（无状态组件）没有实例所以不能添加ref属性
三. 高阶组件
高阶组件就是一个函数，不要被他的名字所迷惑，它接收一个React组件作为参数，返回一个新的React组件，高阶组件属于函数式编思想，对于被包裹的组件是不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。
使用场景一：属性代理
import React, { Component } from 'React';
// 高阶组件
const HOC = (WrapperComponent) => {
return class extends Component {
render() {
return <WrapperComponent {...this.props} />;
}
};
};
// 普通组件
class NormalComponent extends Component {
render() {
return <div>just a div</div>;
}
}
// 使用高阶组件
export default HOC(NormalComponent);
在上面的例子中高阶组件将参数组件原封不动的返回了，并将传给它的参数props全部传递给参数组件实例。在HOC组件中可以对props进行增加、删除、修改的操作所以称之为属性代理。redux的connect方法返回的是一个典型的高阶组件，它给参数组件注入dispatch等属性。
使用装饰器修饰WrapperComponent
@HOC
class NormalComponent extends Component {
render () {
return <div> just a div</div>
}
}
export default NormalComponent
装饰器用来修改类的行为就相当于NormalComponent = HOC(NormalComponent ) || NormalComponent ,详细内容可以参考es6装饰器
注意：
（1）babel6.x中尚未正式支持装饰器所以需要安装babel-plugin-transform-decorators-legacy然后在.babelrc配置文件中添加"plugins": ["transform-decorators-legacy"]
（2）vscode会警告不识别装饰器需要Go to File => Preferences => Settings， Add javascript.implicitProjectConfig.experimentalDecorators": true)
（3）装饰器是用来修饰类的所以不能用于函数式组件（无状态组件）
属性代理可以做以下几件事情：
- 获取被包裹组件(WrapperComponent)的refs
import React, { Component } from 'React'
const HOC = (WrapperComponent) => {
return class extends Component {
wrapper = React.createRef();
componentDidMount() {
console.log(this.wrapper.current.state) // {text: 'just a div'}
this.wrapper.current.setState({text: 'hello world'}) // 最终页面上渲染的是hello world
// 可以获取被包裹组件实例
}
render () {
return <WrapperComponent {...this.props} ref={this.wrapper}/>
}
}
}
@HOC
class NormalComponent extends Component {
state = {
text: 'just a div'
}
render () {
return <div> {this.state.text}</div>
}
}
export default NormalComponent
2.抽象state
将包裹组件的状态stae提取到高阶组件中，常见用法是将一个uncontrolled组件转变为controlled组件
import React, { Component } from 'React'
const HOC = (WrapperComponent) => {
return class extends Component {
state = {value: ''}
onChange = (e) => {
this.setState({value: e.target.value})
}
render () {
return <WrapperComponent {...this.props} onChange={this.onChange} value={this.state.value}/>
}
}
}
// 函数式组件不能用装饰器，装饰器只能修饰类
const CustomerInput = (props) => <input {...props} type="text"/>
export default HOC(CustomerInput)
input组件本身是非受控组件，通过高阶组件处理之后变成了受控组件，CustomerInput 可以通过this.popos.value获取input的value而不用通过refs获取了。
注意：value需要根据input的类型设置初始值否则会抛出A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)错误
- 添加新的ui内容
import React, { Component } from 'React'
const HOC = (WrapperComponent) => {
return class extends Component {
static defaultProps = {
label: 'name'
}
render () {
return (
<div>
<lable>{this.props.label}</lable>
<WrapperComponent {...this.props} />
</div>
)
}
}
}
@HOC
class NormalComponent extends Component {
render () {
return <input {...this.props} type="text"/>
}
}
export default NormalComponent
使用场景二：反向代理
import React, { Component } from 'React';
// 高阶组件
const HOC = (WrapperComponent) => {
return class Enchance extends WrapperComponent {
state = {
text: 'cover text in super state'
}
render() {
return super.render();
}
};
};
// 普通组件
@HOC
class NormalComponent extends Component {
static NUM = 123;
state = {
text: 'just a div'
}
render() {
return <div>{this.state.text}</div>;
}
}
// 使用高阶组件
export default NormalComponent;
// 页面渲染<div>cover text in super state</div>
由于Enchance 类继承了WrapperComponent 类，而不是WrapperComponent 类继承其他类，所以称之为反向继承，反向继承相对于属性代理更加灵活，可以进行一些个性化操作。
渲染劫持
修改由 render 方法输出的 React 组件树
const HOC = (WrapperComponent) => {
return class Enchance extends WrapperComponent {
state = {
text: 'cover text in super state'
}
render() {
const domTree = super.render();
const style = {color: 'red'};
return React.cloneElement(domTree, {style});
}
};
};
图片.png
还可以使用porps进行条件渲染。
可以使用@HOC1 @HOC2...@HOCn的方式来连续使用高阶组件。
