深入淺出React之第一章:DOM,也許不是答案


react,新的前端思維方式

  1. react的首要思想是通過組件來開發應用。所謂組件,簡單的來說就是能完成某個特定功能的、獨立的、可重用的代碼。通過基於組件的開發模式,把一個大的應用分解成若干小的組件,每個組件只關注於某個小范圍的特定功能,但是把組件組合起來,就能夠構成一個功能龐大的應用。如果分解功能的過程做的十分巧妙,那么每個組件都可以在不同的場景下面重用,那樣不僅可以構建出一個龐大的應用,還可以構建出更靈活的應用。

  2. 對比jQuery的開發方式

    2.1 jQuery是如何工作的?

    <div>
    <button id='clickMe'>click me</button>
    <div>
    Click Count:<span id='clickCount'>0</span>
    </div>
    </div>
        $(function(){
    $('#clickMe').click(function(){
    var clickCounter=$('#clickCount');
    var count= parseInt(clickCounter.text(),10);
    clickCounter.text(count+1);
    });
    })

    jQuery中,首先需要通過css選擇器找到對應的DOM元素,然后掛上對應的事件函數,在事件函數中執行相應的操作。這種方式簡單易懂,但是,對於龐大的項目,這種模式會造成代碼結構復雜,難以維護。

    2.2 react的方式

        import React,{Component} from 'react';

    class ClickCounter extends Component{
    constructor(props){
    super(props);
    this.state={
    count:0
    }
    this.handleClickButton.bind(this);
    }
    handleClickButton(){
    this.setState({
    count:this.state.count+1
    });
    }
    render(){
    return (
    <div>
    <button onClick={this.handleClickButton}>Click Me</button>
    <div>
    Click Count:{this.state.count}
    </div>
    </div>
    )
    }
    }

    通過react的方式進行編程,無論何種事件,引發的都是react組件的重新渲染,至於如何只修改必要的DOM部分,無論何種事件,則完全交由React去操作,並不需要開發者去關心。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com