React的初步瞭解

時間 2019-11-24

標籤 react 初步瞭解欄目 React 简体版

原文原文鏈接

React框架的官方網址：https://reactjs.orghtml

以前有一個初步的瞭解，經過視頻學習過最最最基礎的，當前可能須要用到，因此接下來打算好好的瞭解下。。。。。react

一.第一個React應用ajax

　　使用React框架首先要安裝框架，這裏直接使用引用的方式來使用，兩個比較好的CND地址，第一個是（staticfile CDN 庫）.http://www.staticfile.org/，第二個是官方的CDN庫 https://reactjs.org/docs/cdn-links.html算法

　　這裏使用官方的設計模式

　<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> --------------react框架的核心庫

<body>
    <header>
        <nav>
            JavaScript React 開發-第一個React應用
        </nav>
    </header>
    <div id="root"></div> // 定義了一個層，用於顯示經過react框架顯示的文本內容
    <script type="text/babel"> // 標籤內使用了JSX語法要求的 babel 屬性
        ReactDOM.render( <h1> Hello, World!!! </h1>,document.getElementById('root'));
    </script>
　　//能夠改成如下一種形式

 　　<script type="text/babel">
        const h1=(<h1>Hello,World!!</h1>); // 能夠直接將元素節點直接定義爲變量形式來使用
        var root=document.getElementById('root');
        ReactDOM.render(h1,root);
    </script>

</body>

　二.渲染更新元素數組

<script>
function updateTime() {  // 定義一個 updateTime 方法，用於實現經過 React 渲染更新
            const helloworld=(<div>  // 經過const 關鍵字定義了一個常量，描述要引入的容器節點
                    <h1>Hello,World</h1>
                    <h2>如今時間是{new Date().toLocaleTimeString()}</h2>    // 使用花括號定義一個時間對象，用於獲取當前時間
                </div>
                )
            var root=document.getElementById('root');  // 獲取頁面中要渲染的元素節點，保存在變量 root 中
            ReactDOM.render(helloworld,root);  // 調用ReactDOM的 render（）將h1節點渲染到 root元素節點 中
        }
 setInterval(updateTime, 1000); // 設置一個定時器，經過調用updateTime（）用於渲染更新時間
</script>

三.React Components 設計模式瀏覽器

　　在React中定義Components（組件）通常有兩種方式，分別是函數方式和 ES6 class方式===========babel

　　1.函數方式框架

<div id="id-div-react"></div>
 <script type="text/babel">
　　　　var divReact=document.getElementById('id-div-react');
        function ReactComp() {  // 封裝一個虛擬DOM，聲明的函數名就是 React Components（組件）的名稱（組件名）
            return <span> // 返回一個組合而成的虛擬DOM
                <h3>React Components(fun)</h3>
                <p>This is a func React Components.</p>
            </span>
        }
        const elReactComp=<ReactComp/>  // 經過 const 聲明一個常量 elReactComp，保存以組件名（ReactComp）生成的自定義標籤<ReactComp/>。特別注意：React自定義的組件名必須以大寫字母開頭

 ReactDOM.render(elReactComp,divReact); </script>

　　2.ES6 class 方式 var divClass=document.getElementById('id-div-class')dom

 class ReactComp extends React.Component { // 經過 class 關鍵字聲明一個 React Component（組件）類，類名爲 ReactComp，繼承自 React Component對象
 　　　　　　render(){　　　　// 經過 render()方法定義了一個 經過標籤組合而成的 虛擬DOM ，經過return 返回
　　　　　　　　return <span>
　　　　　　　　　　<h3>React Components(ES6 class)</h3>
　　　　　　　　　　<p>This is a ES6 class React Components.</p>
　　　　　　　　</span>
　　　　　　}
 　　}

 const elReact=<ReactComp/> ReactDOM.render(elReact,divClass)

三.生命週期

　　1.constructor構造函數（constructor參數接受兩個參數props,context，能夠獲取到父組件傳下來的的props,context,若是你想在constructor構造函數內部(注意是內部，在組件其餘地方是能夠直接接收的)使用props或context,則須要傳入，並傳入super對象。）

  //  初始數據
   constructor(props,context){ 
       // 只要組件存在constructor，就必須寫super ，不然this 指向有問題 console.log(this)
       super(props,context);
       console.log(this.props,this.context)
    }

　　2.componentWillMount 組件將要掛載

　　　　1）、組件剛經歷constructor,初始完數據
　　　　2）、組件還未進入render，組件還未渲染完成，dom還未渲染，componentWillMount 通常用的比較少，更多的是用在服務端渲染

　　　　ajax請求不推薦寫在willmount？why

　　　　a.雖然有些狀況下並不會出錯，可是若是ajax請求過來的數據是空，就會影響頁面的渲染，可能看到的就是空白。
　　　　b.不利於服務端渲染，在同構的狀況下，生命週期會到componentwillmount，這樣使用ajax就會出錯

　　3.componentDidMount 組件渲染完成

　　　　組件第一次渲染完成，此時dom節點已經生成，在這裏能夠調用ajax請求，返回數據setState後組件會從新渲染

　　4.componentWillReceiveProps (nextProps)

　　componentWillReceiveProps在接收父組件改變後的props從新渲染組件時用的比較多（接收一個參數）

　　　　1）經過對比nextProps和this.props,將nextProps setState爲當前的state，從而從新渲染組件

　　5.shouldComponentUpdate （nextProps，nextState）

　　　　惟一用於控制組件從新渲染的生命週期，這裏setState之後，state發生改變，會從新渲染（有些狀況仍是不會從新渲染，好比數組引用不變），能夠設置return false 阻止組件更新

　　6.componentWillUpdate（nextProps，nextState）組件將要更新