react 一些学习

fiber

requestidlecallback 兼容性
msssgaechangel 模拟requestidelcallback

关于React

页面=>由component组成=> 渲染element

高阶组件：

1 属性代理
劫持属性
劫持ref （看看ref上都有哪些东西），
TODO: 话说这里可以劫持方法吗（可以一试） this.ref.funcA=hijackedFuncA;
可以劫持函数

export default () => {
    return (C) => {
        return class extends React.Component {
            constructor() {
                super();
                this.innerRef = React.createRef();
            }
            componentDidMount() {
                console.log("this.innerRef", this.innerRef);
                this.innerRef.current.__proto__.click = WrapHandler(this.innerRef.current.__proto__.click);
            }
            render() {
                return <C ref={this.innerRef} ></C>
            }
        }
    }
}

2 继承/劫持
劫持点击方法
TODO: super.render=>element=> react.cloneElement自定义一些方法
劫持render
额，返回新render就完事了

class 缺点

逻辑无法复用，或者复用手段只能是高阶组件这种，但是高阶组件会额外产生一个层级，影响渲染效率

逻辑分离，定时器，事件监听和释放等操作不易维护

this 指向问题

hooks 有点

利于逻辑拆分，进而逻辑复用
定时器等可以容易维护

TODO: useState ,useHooks，useRef 手写

Gridea