1 react的高阶组件
1.1 操纵组件的props、对组件的props进行增删；
1.2 复用组件逻辑
服用的组件逻辑，互不影响；比如高阶组件中复用了input框，输入内容是互不影响的；
1.3 可以通过配置装饰器来实现高阶组件（只能在类组件中使用）
之前：
import { test } from './test.jsx';
export default test(A);
现在：
import { test } from './test.jsx';
@test
export default A;
1.4 利用forwardRef，通过ref转发获取DOM节点
高阶组件test
export default class App extends React.Component {constructor() {super();this.testRef = React.createRef();}render() {return (<div><p>App Page</p><A ref={this.testRef} /><B /></div>);};componentDidMount() {console.log(this.testRef.current);}
}
第一种情况：
export default function test(Comp) {class HOC extends React.Component {render() {return <Comp {...this.props} />;};}return HOC;
}
如果A组件不使用高阶组件，this.testRef.current指的是A组件实例；
A组件使用了高阶组件，this.testRef.current指的是高阶组件实例；
第二种情况：
命名forwardRef，将ref传下去
export default function test(Comp) {class HOC extends React.Component {render() {return <Comp {..this.props}/>;};}return React.forwardRef((props, ref) => {return <HOC {...props} forwardRef={ref} />})
}
@test
class A extends React.Component {render() {return (<div ref={this.props.forwardRef}><p>A Component</p></div>);};
}
this.testRef.current指的是A组件实例，可以拿到DOM节点
1.5 反向继承（可以做渲染劫持）
之前高阶组件传入一个组件，返回一个组件，返回的组件 extends React.Component，这种叫属性代理；
下面这种叫反向继承，可以做渲染劫持
export default function test(Comp) {return class extends Comp {render() {const element = super.render(); // super.render()返回虚拟DOMconst newProps = element.type === 'div'? { style: { color: '#f00' } }: { style: { color: '#0f0' } };return React.cloneElement(element,{ ...this.props, ...newProps },element.props.children,);};}
}
2 受控组件和非受控组件
是否受控取决于 是否可以使用state控制输入框
像<input />这样的输入框是非受控的，即使使用<input defaultValue="Initial text" />传递了初始值，JSX也只是指定了初始值，而非当前时刻的值，也属于非受控组件；
如果要渲染一个受控输入框，请传递 value 属性（或者向多选框和单选框按钮传递 checked）;React将强制传递 value属性给输入框，通常可以通过声明一个 state 来控制输入框；
function Form() {const [firstName, setFirstName] = useState('');return (<inputvalue={firstName}onChange={e => setFirstName(e.target.value)}/>)
}
看下面的例子
<form>受控：<input type="text" value={num} />非受控：<input type="text" defaultValue={num} /><button type="button" onClick={() => setNum(num + 1)}>+1</button>
</form>
点击按钮，受控组件值会变，但是非受控组件值不变，不受状态影响；
受控组件值不可以手动输入更改；非受控组件可以；
原因是受控组件没有加onChange，应该要配套使用；
那么如何获取受控组件和非受控组件的值？
获取受控组件的值：直接打印num即可；
获取非受控组件的值：通过获取元素document，再去获取元素的值;
或者使用ref
const dv = useRef(null);
<form>非受控：<input type="text" ref={dv} defaultValue={num} />
</form>
dv.current.value可以获取非受控组件的值；
总结：
- defaultValue非受控，不随num值变化而变化；value受控，随num值变化而变化；
- defaultValue可以直接编辑；value不能直接编辑（需要配合onChange事件）；
- 获取值：受控组件直接读取num值；非受控组件通过ref获取值
3 Redux
单一状态树 store
