随便写点东西
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 (
App Page
this.testRef} /
);
};
componentDidMount() {
console.log(this.testRef.current);
}
}
第一种情况：
export default function test(Comp) {
class HOC extends React.Component {
render() {
return ...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 ..this.props}/;
};
}
return React.forwardRef((props, ref) => {
return ...props} forwardRef={ref} /
})
}
@test
class A extends React.Component {
render() {
return (
this.props.forwardRef}
A Component
);
};
}
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()返回虚拟DOM
const newProps = element.type === 'div'
? { style: { color: '#f00' } }
: { style: { color: '#0f0' } };
return React.cloneElement(
element,
{ ...this.props, ...newProps },
element.props.children,
);
};
}
}
2 受控组件和非受控组件
是否受控取决于 是否可以使用state控制输入框
像这样的输入框是非受控的，即使使用传递了初始值，JSX也只是指定了初始值，而非当前时刻的值，也属于非受控组件；
如果要渲染一个受控输入框，请传递 value 属性（或者向多选框和单选框按钮传递 checked）;React将强制传递 value属性给输入框，通常可以通过声明一个 state 来控制输入框；
function Form() {
const [firstName, setFirstName] = useState('');
return (
firstName}
onChange={e = setFirstName(e.target.value)}
/>
)
}
看下面的例子
受控： 非受控： setNum(num + 1)}>+1
点击按钮，受控组件值会变，但是非受控组件值不变，不受状态影响；
受控组件值不可以手动输入更改；非受控组件可以；
原因是受控组件没有加onChange，应该要配套使用；
那么如何获取受控组件和非受控组件的值？
获取受控组件的值：直接打印num即可；
获取非受控组件的值：通过获取元素document，再去获取元素的值;
或者使用ref
const dv = useRef(null);
非受控：dv} defaultValue={num} /
dv.current.value可以获取非受控组件的值；
总结：
- defaultValue非受控，不随num值变化而变化；value受控，随num值变化而变化；
- defaultValue可以直接编辑；value不能直接编辑（需要配合onChange事件）；
- 获取值：受控组件直接读取num值；非受控组件通过ref获取值
3 Redux
单一状态树 store
