day0621

day0621

create-react-app不支持装饰器
使用装饰器：
react-app-rewired

内部状态、外部状态、forceUpdate()

react-redux

粘合剂

容器组件和展示组件

写个index.js进行组件的导出

redux-thunk
读音[sʌŋk]？？？读sun不读创

axios

组件解构出connect

将state和store粘合

connect是一个函数，它的返回值是一个高阶组件

一定不要修改state，返回一个新的状态

对象深复制

JSON.parse(JSON.stringify(源对象))实现对象深复制
lodash实现

redux最后一个api

redux 的render默认做一次dispatch

redux要求action是扁平对象或者函数

bindActionCreaator有点绕，务必搞清

事件写成箭头函数解决this

缓存
memoize-one

规范：按功能/按角色

十四、Portal

ReactDOM.createPortal(child,container);

1、用法

render() {
  // React 挂载一个div节点，并将子元素渲染在节点中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

render(){
    // 此时React不再创建div节点，而是将子元素渲染到Dom节点上。domNode，是一个有效的任意位置的dom节点。
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    )
}

2、在protal中的事件冒泡

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const getDiv = () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    return div;
};

const withPortal = (WrappedComponent) => {
    class AddPortal extends Component {
        constructor(props) {
            super(props);
            this.el = getDiv();
        }

        componentWillUnmount() {
            document.body.removeChild(this.el);
        }

        render(props) {
            return ReactDOM.createPortal(<WrappedComponent {...props} />, this.el);
        }
    }
    return AddPortal;
};

class Modal extends Component {
    render() {
        return (
            <div>
                <div>amodal content</div>
                <button type="button">Click</button>
            </div>
        );
    }
}

const PortalModal = withPortal(Modal);

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(state => ({
            clicks: state.clicks + 1
        }));
    }


    render() {
        return (
            <div onClick={this.handleClick}>
                <h3>ppppppppp</h3>
                <h3>num: {this.state.clicks}</h3>
                <PortalModal />
            </div>
        );
    }
}

export default Page;