php自己做网站吗提高工作效率心得体会

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可以获取非受控组件的值；

总结：

1. defaultValue非受控，不随num值变化而变化；value受控，随num值变化而变化；
2. defaultValue可以直接编辑；value不能直接编辑（需要配合onChange事件）；
3. 获取值：受控组件直接读取num值；非受控组件通过ref获取值

3 Redux

单一状态树 store