做手机版网站和做app差别,如何建立个人网址,那些免费网站可以做国外贸易,上海网站备案管理中心1 react的高阶组件
1.1 操纵组件的props、对组件的props进行增删#xff1b; 1.2 复用组件逻辑 服用的组件逻辑#xff0c;互不影响#xff1b;比如高阶组件中复用了input框#xff0c;输入内容是互不影响的#xff1b; 1.3 可以通过配置装饰器来实现高阶组件#xff08…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 (divpApp Page/pA 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}pA 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 defaultValueInitial text /传递了初始值JSX也只是指定了初始值而非当前时刻的值也属于非受控组件
如果要渲染一个受控输入框请传递 value 属性或者向多选框和单选框按钮传递 checked;React将强制传递 value属性给输入框通常可以通过声明一个 state 来控制输入框
function Form() {const [firstName, setFirstName] useState();return (inputvalue{firstName}onChange{e setFirstName(e.target.value)}/)
}看下面的例子
form受控input typetext value{num} /非受控input typetext defaultValue{num} /button typebutton onClick{() setNum(num 1)}1/button
/form点击按钮受控组件值会变但是非受控组件值不变不受状态影响 受控组件值不可以手动输入更改非受控组件可以 原因是受控组件没有加onChange应该要配套使用
那么如何获取受控组件和非受控组件的值 获取受控组件的值直接打印num即可 获取非受控组件的值通过获取元素document再去获取元素的值; 或者使用ref
const dv useRef(null);
form非受控input typetext ref{dv} defaultValue{num} /
/formdv.current.value可以获取非受控组件的值
总结
defaultValue非受控不随num值变化而变化value受控随num值变化而变化defaultValue可以直接编辑value不能直接编辑需要配合onChange事件获取值受控组件直接读取num值非受控组件通过ref获取值
3 Redux
单一状态树 store
