React介紹(講人話)


React 背景知識

  React 是一個用於構建用戶界面的 JavaScript 庫,主要用於構建 UI,而不是一個 MVC 框架,但可以使用 React 作為 MVC 架構的 View 層輕易的在已有項目中使用,它是一個用於構建用戶界面的 JavaScript 庫,起源於 Facebook 的內部項目,用來架設 Instagram 的網站,於 2013 年 5 月開源。React 擁有較高的性能,代碼邏輯非常簡單,越來越多的人已開始關注和使用它。

  以前沒有 ajax 技術的時候,web 頁面從服務端整體渲染出 html 輸出到瀏覽器端進行渲染,同樣的,用戶的一個改變頁面的操作也會刷新整個頁面來完成。直到有了 ajax 出現,實現頁面局部刷新,帶來的高效和分離讓 web 開發者們驚嘆不已。但隨之而來的問題是,復雜的用戶交互及展現需要通過大量的 DOM 操作來完成,這讓頁面的性能以及開發的效率又出現了新的瓶頸。

  時至今日,談到前端性能優化,減少 DOM 元素、減少 reflow 和 repaint、編碼過程中盡量減少 DOM 的查詢等手段是大家耳熟能詳的。而頁面任何UI的變化都是通過整體刷新來完成的。幸運的是,React 通過自己實現的 DOM Diff 算法,計算出虛擬頁面當前版本和新版本之間的差異,最小化重繪,避免不必要的 DOM 操作,解決了這兩個公認的前端性能瓶頸,實現高效 DOM 渲染。

  我們知道,頻繁的操作 DOM 所帶來的性能消耗是很大的,而 React 之所以快,是因為它不直接操作 DOM,而是引進虛擬 DOM 的實現來解決這個問題

  對於頁面的更新,React 通過自己實現的 DOM Diff 算法來進行差異對比、差異更新,反映到頁面上就是只重繪了更新的部分,從而提高渲染效率。

備注:以下性能闡述參考自尤雨溪。

  對於 React 的性能方面,想啰嗦幾句:

    1. React 從來沒有說過 “React 比原生操作 DOM 快”。React 的基本思維模式是每次有變動就整個重新渲染整個應用。如果沒有 Virtual DOM,簡單來講就是直接重置 innerHTML。

    2. 在比較性能的時候,要分清楚初始渲染、小量數據更新、大量數據更新這些不同的場合。

    3. 不要天真地以為 Virtual DOM 就是快,diff 不是免費的,Virtual DOM 真正的價值從來都不是性能,而是它 

      1) 為函數式的 UI 編程方式打開了大門;

      2) 可以渲染到 DOM 以外的其他場景,如 backend、native。

組件化

  在業務開發中,遇到公共的模板部分,我們不得不將模板和規定的數據格式耦合在一起來實現組件。而在 React 中,我們可以使用 JSX 語法來封裝組件,將組件的結構、數據邏輯甚至樣式都聚合在一起,更加簡單、明了、直觀的定義組件。

  有了組件化的實現,我們可以很直觀的將一個復雜的頁面分割成若干個獨立組件,再將這些獨立組件組合完成一個復雜的頁面。這樣既減少了邏輯復雜度,又實現了代碼的重用。

React 基礎

模板

<!DOCTYPE html><html><head><script src=“js/react.js”></script><script src=“js/react-dom.js”></script><script src=“js/browser.min.js”></script></head><body><div id=“example”></div><script type=“text/babel”>/*
    
    * ReactDOM.render 是 React 的最基本方法,用於將模板轉為 HTML 語言,

    * 並插入指定的 DOM 節點。

    * 
    */
 
        ReactDOM.render(

            <h1>Hello, 博看文思!</h1>,
            document.getElementById(‘example’)

        );

        </script></body></html>            

JSX

  上一節的代碼, HTML 語言直接寫在 JavaScript 語言之中,不加任何引號,這就是 JSX 的語法,它允許 HTML 與 JavaScript 的混寫

JSX的好處:

1.使用JSX語法來封裝組件有什么好處:

  1)熟悉的代碼

  2)更加語義化

  3)更加抽象且直觀

2.幾個注意點:

  1)render的方法中return的頂級元素只能是一個;

  2)如果要定義樣式的時候,不能這樣去寫
    // 不要出現類似的錯誤,style=“opacity:{this.state.opacity};”

  3)使用 className 和 htmlFor 來替代對應的class 和 for

提示:關於組件化的話題,感興趣的話可以繼續關注Vuejs、Web components等對組件的寫法。/**隨着更為復雜的多端環境的出現,組件標准化還有着更大的想象空間,React的組件定義不是終點,也不一定是標准,但會在組件化的道路上留下深刻de影響。**/

JSX 基本語法:

    var names = [‘Alice’, ‘Emily’, ‘Kate’];


    ReactDOM.render(

        <div>

        {
    
        names.map(function (name,key) {

            return <div key={key}>Hello, {name}!</div>

        })
        
}

        </div>,
 
                document.getElementById(‘example’)

    ); 

  上面代碼體現了 JSX 的基本語法規則:遇到 HTML 標簽(以 < 開頭),就用 HTML 規則解析;遇到代碼塊(以 { 開頭),就用 JavaScript 規則解析。

  JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組,則會展開這個數組的所有成員。

var arr = [

       <h1>Hello world!</h1>,
 
       <h2>React is awesome</h2>,

];

ReactDOM.render(

        <div>{arr}</div>,

        document.getElementById(‘example’)

);

組件

1.概念

  React 允許將代碼封裝成組件(component),然后像插入普通 HTML 標簽一樣,在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類 

2.代碼示例

var HelloMessage = React.createClass({

    render: function() {

        return <h1>Hello {this.props.name}</h1>;

    }

});


ReactDOM.render(

    <HelloMessage name=“John” />,
 
    document.getElementById(‘example’)

);

 

var HelloMessage = React.createClass({

 render: function() {

return <h1 className=“green”>Hello {this.props.name}</h1>;

 }

});


ReactDOM.render(

  <HelloMessage name=“John” />,

document.getElementById(‘example’)

);

this.props.children

this.props 對象的屬性與組件的屬性一一對應,但是有一個例外,就是 this.props.children 屬性。它表示組件的所有子節點

var NotesList = React.createClass({
    render: function() {
        return (
        <ol>
        {
            /*
            * 因為this.props.children的返回值會根據子節點的數量返回undefined,object,array.
            * 所以react提供了一個react.Children的方法專門處理this.props.children
            * */
            React.Children.map(this.props.children, function (child) {
                return <li>{child}</li>;
            })
        }
        </ol>
        );
    }
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
        document.getElementById(“example”)
);

 PropTypes

組件的屬性可以接受任意值,字符串、對象、函數等等都可以。有時,我們需要一種機制,驗證別人使用組件時,提供的參數是否符合要求。組件類的PropTypes屬性,就是用來驗證組件實例的屬性是否符合要求。

var MyTitle = React.createClass({
    propTypes: {
        /*
        * 聲明title屬性是必須的,並且數據類型要為字符串,相當於是規范化的接口文檔
        * */
        title: React.PropTypes.string.isRequired,
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});
var data = “123”;
ReactDOM.render(
    <MyTitle title={data} />,
        document.getElementById(“example”)
);

 

   錯誤示范:

var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

 

getDefaultProps

getDefaultProps 方法可以用來設置組件屬性的默認值

var MyTitle = React.createClass({
        getDefaultProps: function () {
            return {
                title:”hello world”
            }
        },
        render: function() {
            return <h1> {this.props.title} </h1>;
        }
    });
//    var data = “123”;
    ReactDOM.render(
        <MyTitle />,
            document.getElementById(“example”)
    );

  獲取真實的 DOM 節點

  組件並不是真實的 DOM 節點,而是存在於內存之中的一種數據結構,叫做虛擬 DOM (virtual DOM)。只有當它插入文檔以后,才會變成真實的 DOM 。根據 React 的設計,所有的 DOM 變動,都先在虛擬 DOM 上發生,然后再將實際發生變動的部分,反映在真實 DOM上,這種算法叫做 DOM diff ,它可以極大提高網頁的性能表現。

var MyComponent = React.createClass({
    handleClick: function() {
        this.refs.myTextInput.focus();
    },
    render: function() {
        return (
        <div>
        <input type=“text” ref=“myTextInput” />
        <input type=“button” value=“Focus the text input” onClick={this.handleClick} />
        </div>
        );
    }
});

ReactDOM.render(
<MyComponent />,
        document.getElementById(‘example’)
);

  this.state

   組件免不了要與用戶互動,React 的一大創新,就是將組件看成是一個狀態機,一開始有一個初始狀態,然后用戶互動,導致狀態變化,從而觸發重新渲染 UI。React 把組件看成是一個狀態機(State Machines)。通過與用戶的交互,實現不同狀態,然后渲染 UI,讓用戶界面和數據保持一致。React 里,只需更新組件的 state,然后根據新的 state 重新渲染用戶界面 

var LikeButton = React.createClass({
    getInitialState: function() {
        /*
        * 設置狀態的初始值
        * */
        return {liked: false};
    },
    handleClick: function() {
        /*
        * 更改狀態
        * */
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? ‘喜歡’ : ‘不喜歡’;
        return (
        <p onClick={this.handleClick}>
        你 {text} 他. 點擊切換.
        </p>
        );
    }
});

ReactDOM.render(
<LikeButton />,
        document.getElementById(‘example’)
); 

  由於 this.props 和 this.state 都用於描述組件的特性,可能會產生混淆。一個簡單的區分方法是,this.props 表示那些一旦定義,就不再改變的特性,而 this.state 是會隨着用戶互動而產生變化的特性。

 

var Input = React.createClass({
    getInitialState: function() {
        return {value: ‘Hello!’};
    },
    handleChange: function(event) {
        this.setState({value: event.target.value});
    },
    render: function () {
        var value = this.state.value;
        return (
        <div>
        <input type=“text” value={value} onChange={this.handleChange} />
        <p>{value}</p>
        </div>
        );
    }
});

ReactDOM.render(<Input/>, document.body);

 

組件 API

 

組件的7個方法:

  設置狀態:setState;

  替換狀態:replaceState;

  設置屬性setProps;

  替換屬性replaceProps;

  強制更新:forceUpdate;

  獲取DOM節點:getDOMNode;

  判斷組件掛載狀態:isMounted。

組件生命周期

初始化

getDefaultProps:設置默認性的值

getInitialState:設置初始的狀態

componentWillMount:(組件即將被裝載)

render(渲染)

componentDidMount:組件已經被裝載,只會在第一個組件被調用的時候出發

運行中

componentWillReceiveProps   在組件將要接收到屬性的時候,接收屬性前

shouldComponentUpdate    在接收到新的 props 或者 state,將要渲染之前調用。該方法在初始化渲染的時候不會調用

componentWillUpdate         render 觸發之前,更新

render              渲染

componentWillUnmount      在組件從 DOM 中移除的時候立刻被調用

銷毀

componentWillUnmount     在組件從 DOM 中移除的時候被立刻調用

 

var Hello = React.createClass({
    getInitialState: function () {
        return {
            opacity: 1.0
        };
    },

    componentDidMount: function () {
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }.bind(this), 100);
    },

    render: function () {
        return (
        <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
        </div>
        );
    }
});

ReactDOM.render(
<Hello name=“world”/>,
        document.body
);

 

因為 React 組件樣式是一個對象第一重大括號表示這是 JavaScript 語法,第二重大括號表示樣式對象

 

Ajax

  上面代碼沒有使用 jQuery 完成 Ajax 請求,這是為了便於說明。React 本身沒有任何依賴,完全可以不用jQuery,而使用其他庫。

var Input = React.createClass({
    getInitialState: function () {
        return {users:[]}
    },
    componentDidMount:function(){
        var _this = this;
        $.get(“http://localhost:8080/users?act=get”,function (data){
            console.log(data);
            _this.setState({
                users:data
            });
        });
    },
    render: function () {
        var users = this.state.users;
        console.log(users);
        return <table>
        {
            users.map(function (user,key){
            return <tr key={key}><td>{user.firstName}</td><td>{user.lastName}</td></tr>
        })
        }
        </table>
    }
});
ReactDOM.render(<Input/>,document.getElementById(“test”));

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM