随便写点东西

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

总结：

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

3 Redux

单一状态树 store