React中的单向数据流

单项数据流

---

• ReactDOM.render()是单向数据流，当数据发生变化时，视图并不会更新

<div id="root"></div>

<script type="text/babel">
    let num = 0;

    ReactDOM.render((
        <input type="button" onClick={
     
     () => {
     
     
            num++;
            console.log(num);
        }} value={
     
     num}/>
    ), document.querySelector("#root"));
</script>

使用函数包裹自身，调用自身，更新视图

---

实现+实例

<div id="root"></div>

<script type="text/babel">
    let num = 0;
    function main() {
     
     
        ReactDOM.render((
            <input type="button" onClick={
     
     () => {
     
     
                num++;
                main();
            }} value={
     
     num}/>
        ), document.querySelector("#root"));
    }
    
    main();
</script>

实现显示隐藏案例

<div id="root"></div>

<script type="text/babel">
    let isShow = true;


    function main() {
     
     
        ReactDOM.render((
            <div>
                <input type="button" value={
     
     "显示与隐藏"} onClick={
     
     () => {
     
     
                    isShow = !isShow;
                    main();
                }}/>
                <div style={
     
     {
     
     
                    width: "100px",
                    height: "100px",
                    background: "yellow",
                    display: isShow ? "block" : "none"
                }}>
                </div>
            </div>
        ), document.querySelector("#root"));
    }

    main();
</script>