快速理解React的開發思想

時間 2019-11-16

標籤快速理解 react 開發思想欄目 React 简体版

原文原文鏈接

相比較於VUE, 我的在開發過程當中更加傾向於REACT，html

不是由於REACT更好用，相反是更難用，就是你們所說的學習曲線陡，node

可是REACT我的以爲正是由於他難用，或者說，代碼風格更加趨近於原生JS,尤爲是ES6的面向對象的編程思想，能夠一邊開發，一邊提高本身的原生js熟練程度，不至於過分產生框架依賴。react

下面以一個點贊事件爲例編程

採用純js開發思想，因爲沒有JSX編譯，因此暫時使用模版字符串作替代。bash

1. 理解數據驅動思想

<body>
    <div id="root"></div>
    <!--root將會被做爲根節點，在裏面渲染一個按鈕，實現點贊事件-->
    
    <script>
    var root = document.getElementById('root');
    
    //1. 設置初始化狀態
    var state =  {
        like : false,
        color:'black'
    }
    
    //2. 經過setState觸發修改數據觸發渲染事件
    function setState (newState){
        state = {
            ...state,
            ...newState
        }
        console.log(state)
        render();
    }
    
    // 加載頁面進行初始化渲染
    render();

    // 事件 調用該事件 觸發 setState 進行渲染
    function handleClick(){
        setState({
            like : !state.like,
            color: state.like?  'black' :'red'
        })
    }
    
    // 渲染頁面函數
    function render(){
        root.innerHTML =  
        `
        <button style="color:${state.color}" onclick="handleClick()">${state.like? '已贊':'點贊'}</button>
        `
    }
    </script>
</body>

複製代碼

0. 初始化渲染，綁定事件

1. 觸發事件函數，該函數進行觸發setState

2. setState被觸發，修改狀態(修改state中的數據)，修改後觸發渲染函數

3. 渲染該組件

2.理解react的面向對象的組件式開發思想

<body>
    <div id="root"></div>
    <!--在這個節點上面渲染-->
    
    <script>
        var root = document.getElementById('root')
        
        // 這個是父類
        class Component {
            setState(newState) {
                this.state = {
                    ...this.state,
                    ...newState
                }
                return this;
            }
        }
        
        // 這個是子類 按鈕 繼承父類的setState功能
        class Button extends Component {
            constructor() {
                super()
                this.state = {
                    like: false
                }
                this.render()
            }
            render() {
                const state = this.state;
                const node = `<button style="color:${state.like ? 'red' : 'black'}" onclick="this.handleClick()">${state.like ? '已贊' : '點贊'}</button>`;
                
                return node;
            }
        }
        // 這個是子類 標題 繼承父類的setState功能
        class Title extends Component {
            constructor() {
                super()
                this.state = {
                    text: '這是一個標題'
                }
            }
            render() {
                return `<h1>${this.state.text}</h1>`
            }
        }
        
        //這個做爲包裝容器， 
        class Wrap {
            constructor() {
            }
            render() {
                return `
                // 構造渲染子類
                ${new Title().render()}
                // 能夠調用修改本身的狀態， 每個模塊都相互獨立，互不影響。
                ${new Button().setState({ like: true }).render()}
                ${new Title().render()}
                ${new Button().render()}
                `
            }
        }
        //將wrap渲染到 html中
        root.innerHTML = new Wrap().render();

    </script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。