详解React 的数据流和生命周期

this.setState({
    date: new Date()
})

this.setState(() => ({
    date: new Date()
}))

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

const MyComponent = (props) => (
    <div>
        <MyComponentSub1 content={props.cnt1}/>
        <MyComponentSub2 content={props.cnt2}/>
    </div>
)

const MyComponentSub1 = (props) => (
    <p>sub1: {props.content}</p>
)

const MyComponentSub2 = (props) => (
    <p>sub2: {props.content}</p>
)
ReactDOM.render(
    <MyComponent cnt1="apple" cnt2="orange" />,
    document.getElementById('root')
);

sub1: apple

sub2: orange

constructor(props) {
    super(props);
    this.state = {
        groupMap: {}
    }
}

constructor(props) {
    super(props);
    this.textView = null;
    this.JSONView = null;
    this.state = {
        view: '1'
    }
}

constructor(props) {
    super(props);
    this.input = null;
    this.state = {
        fetching: false,
        showDot: false,
        uploading: false,
        uploadStatus: 'active',
        pwd: [],
        objects: [],
        percent: 0
    }
}

store.fetchRecords();

http.post('/api/config/history/'

this.updateValue()

// 相当于 componentDidMount()
React.useEffect(() => {
    console.log('a')
}, [])

// 相当于 componentDidMount()、componentDidUpdate()
React.useEffect(() => {
    console.log('a')
})

// 相当于 componentDidMount、componentWillUnmount
React.useEffect(() => {
    console.log('a')
    return () => {
        console.log('b')
    }
}, [])

// 模拟 componentDidMount，用于发送网络请求
useEffect(() => {
    setFetching(true);
    http.get('/api/app/deploy/')
        .then(res => setDeploys(res))
        .finally(() => setFetching(false))
    if (!envStore.records.length) {
        envStore.fetchRecords().then(_initEnv)
    } else {
        _initEnv()
    }
}, [])

// 模拟 componentDidMount 发送网络请求、添加定时器，模拟 componentWillUnmount 删除定时器
useEffect(() => {
    fetch();
    listen();
    timer = setInterval(() => {
      if (ws.readyState === 1) {
        ws.send('ping')
      } else if (ws.readyState === 3) {
        listen()
      }
    }, 10000)
    return () => {
      if (timer) clearInterval(timer);
      if (ws.close) ws.close()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

React.useEffect(() => {
    store.fetchGitlabList()
    store.fetchProjectName()
}, [])

// 模拟 componentDidMount()、componentDidUpdate()
useEffect(() => {
    setLoading(true);
    http.get('/api/home/alarm/', {params})
      .then(res => setRes(res))
      .finally(() => setLoading(false))
}, [params])

useEffect(() => {
    let socket;
    initialTerm()
    http.get(`/api/repository/${store.record.id}/`)
      .then(res => {
        term.write(res.data)
        setStep(res.step)
        if (res.status === '1') {
          socket = _makeSocket(res.index)
        } else {
          setStatus('wait')
        }
      })
      .finally(() => setFetching(false))
    return () => socket && socket.close()
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

useEffect(props.request.mode === 'read' ? readDeploy : doDeploy, [])

// 写多个 useEffect 也可以
useEffect(() => {
    if (!loading) {
      http.get('/api/exec/history/')
        .then(res => setHistories(res))
    }
}, [loading])

useEffect(() => {
    return () => {
        store.host_ids = []
        if (store.showConsole) {
        store.switchConsole()
        }
    }
}, [])

// 挂载时注册事件 resize，卸载时注销事件 resize
useEffect(() => {
    store.tag = ''
    gCurrent = current
    const fitPlugin = new FitAddon()
    term.setOption('disableStdin', false)
    term.setOption('fontFamily', 'Source Code Pro, Courier New, Courier, Monaco, monospace, PingFang SC, Microsoft YaHei')
    term.setOption('theme', {background: '#f0f0f0', foreground: '#000', selection: '#999', cursor: '#f0f0f0'})
    term.loadAddon(fitPlugin)
    term.open(el.current)
    fitPlugin.fit()
    term.write('\x1b[36m### WebSocket connecting ...\x1b[0m')
    const resize = () => fitPlugin.fit();
    window.addEventListener('resize', resize)
    setTerm(term)

    return () => window.removeEventListener('resize', resize);
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

<script type="text/babel">
    class ChildComponent extends React.Component {
        static propTypes = {
            name: PropTypes.string
        };
        static defaultProps = (function () {
            console.log("ChildComponent : defaultProps。孩子的 defaultProps 是");
            return {};
        })();
        constructor(props) {
            super(props);
            console.log("ChildComponent: state。孩子的 state 是");
            this.state = {
                text: "peng"
            };
        }

        // 组件挂载后（插入 DOM 树中）立即调用。常做网络请求
        componentDidMount() {
            console.log("ChildComponent : componentDidMount");
        }

        shouldComponentUpdate(nextProps, nextState) {
            console.log("<ChildComponent/> - shouldComponentUpdate()");
            return true;
        }
        // React 更新 dom 和 refs 后调用
        componentDidUpdate(previousProps, previousState) {
            console.log("ChildComponent: componentDidUpdate");
        }
        componentWillUnmount() {
            console.log("ChildComponent: componentWillUnmount");
        }

        render() {
            if (this.props.content === 'jiali12') {
                throw new Error("模拟组件报错");
            }

            console.log("ChildComponent: render");
            // 下面两种写法等效。一个是单根一个是多根。

            // return <div className="subClass">
            //     sub
            //     <p>{this.props.content}</p>
            // </div>

            // 下面这种数组的写法需要给每个元素添加 key，否则报错如下：
            // Warning: Each child in a list should have a unique "key" prop.
            // React 要求每个被迭代项传递一个 key，对于 render() 方法返回的任何数组组件亦如此。
            return [
                <div key="name" className="subClass">sub</div>,
                <p key="content">{this.props.content}</p>
            ]

        }
    }

    class ParentComponent extends React.Component {
        static defaultProps = (function () {
            console.log("ParentComponent: defaultProps。我的 defaultProps 是");
            return {
                true: false
            };
        })();
        constructor(props) {
            super(props);
            console.log("ParentComponent: state。我的 state 是");
            this.state = { text: "jiali" };
            this.onInputChange = this.onInputChange.bind(this);
        }

        onInputChange(e) {
            const text = e.target.value;
            this.setState(() => ({ text: text }));
        }
        componentDidMount() {
            console.log("ParentComponent: componentDidMount");
        }
        componentDidUpdate(previousProps, previousState) {
            console.log("ParentComponent: componentDidUpdate");
        }
        componentWillUnmount() {
            console.log("ParentComponent: componentWillUnmount");
        }
        // 此生命周期在后代组件抛出错误后被调用
        componentDidCatch(err, errorInfo) {
            console.log("componentDidCatch");
            this.setState(() => ({ err, errorInfo }));
        }

        render() {
            if (this.state.err) {
                return <div>降级处理</div>
            }
            console.log("ParentComponent: render");
            return <div className="parentClass">

                <p>parent</p>
                <input
                    key="input"
                    value={this.state.text}
                    onChange={this.onInputChange}
                />
                <ChildComponent content={this.state.text} />
            </div>

        }
    }

    ReactDOM.render(
        <ParentComponent />,
        document.getElementById('root')
    );
</script>

<div id="root">
    <div class="parentClass">
        <p>parent</p>
        <input value="jiali">
        <!-- 子组件 -->
        <div class="subClass">sub</div>
        <p>jiali</p>
        <!-- /子组件 -->
    </div>
</div>

ReactDOM.render(
    <ParentComponent />,
    document.getElementById('root')
);