React（一）起步

時間 2019-11-09

標籤 react 起步欄目 React 简体版

原文原文鏈接

輕量級的視圖層框架

React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式javascript

React高性能的原理：

減小對DOM進行操做，引入了虛擬DOM，如：先將節點內容從A-B,B-A，React會認爲A變成B，而後又從B變成A ，不發生任何變化。html

特色：

虛擬DOMjava

組件系統node

單向數據流react

JSX 語法ajax

起步：

引入三個js文件：(react版本是15版本，可能和16版本的操做有部分差別)babel

react.js
react-dom.js
browser.jsapp

最簡單的React操做：框架

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./react.min.js"></script>
        <script src="./react-dom.min.js"></script>
        <script src="./browser.min.js"></script>
    </head>

    <body>
        <div id="app"></div>
        <script type='text/babel'>
            //建立組件
    var Hello = React.createClass({
        render:function () {
            return (
                //jsx語法
                <div>HelloWorld</div>
            )
        }
    })
    //利用ReactDOM對象的render方法將組件渲染到某個節點裏
    ReactDOM.render(<Hello/>,app)
   </script>
    </body>

</html>

JSX：

JSX是一種語法，全稱：javascript xmldom

用法：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./react.min.js"></script>
        <script src="./react-dom.min.js"></script>
        <script src="./browser.min.js"></script>
    </head>

    <body>
        <div id="app1"></div>
        <script type='text/babel'>
            var World = React.createElement(
            'h1',
            {className:'abc',id:'haha'},
            [React.createElement('span',null,'Hello'),
            React.createElement('mark',null,'World')])
            ReactDOM.render(World,app1)
        </script>
    </body>

</html>

添加樣式：

行內樣式：

<div style = { {color:'red',fontSize:2+'em'} }>Hello world</div>
//{ }的做用相似於Vue中的表達式符號

寫在React.createClass中用this調用：

var Hello = React.createClass({
        style:{
            background:'lightgreen',
            color:'deepskyblue'
        },
        render:function () {
            return (
                //jsx語法
                <div style={this.style}>HelloWorld</div>
            )
        }
    })

事件：（相似於原生，在React.createClass中添加事件觸發的函數，在元素中用this.handler調用）

<script type="text/babel">
            var Hello = React.createClass({
            clickHandler(){
            console.log('HelloWorld');
            },
          render:function () {
              return (
                  <div>
                      <div onClick={this.clickHandler}>Click</div>
                  </div>

              )
          }
      })
      ReactDOM.render(<Hello/>,app)
    </script>

React與原生事件的不一樣點：（react中對於事件進行了處理，解決了一些兼容性問題，若是不取值的話，值都是null）

組件包含：（在父組件直接寫子組件便可）

<script type="text/babel">
            var Hello = React.createClass({
            clickHandler(){
            console.log('HelloWorld');
            },
          render:function () {
              return (
                  <div>
                      <World/>//子元素
                  </div>
              )
          }
      })
      var World = React.createClass({
            clickHandler(){
            console.log('HelloWorld');
            },
          render:function () {
              return (
                  <div>
                      <div onClick={this.clickHandler}>Click</div>
                  </div>
              )
          }
      })
      ReactDOM.render(<Hello/>,app)

state（狀態）與組件自己有關，由本身修改

props（屬性）並不是本身修改，能夠從父組件獲取，也能夠給子組件設置

props（屬性）：在父組件包含的子組件標籤中加入參數，在子組件中用this.props.children調用：

<script type="text/babel">
            var Hello = React.createClass({
          render:function () {
              return (
                  <div>
                      <World>{{a:1,b:2}}</World>
                  </div>
              )
          }
      })
      var World = React.createClass({
            clickHandler(){
            console.log(this.props);
            },
          render:function () {
              return (
                  <div>
                      <div onClick={this.clickHandler}>Click</div>
                  </div>
              )
          }
      })
      ReactDOM.render(<Hello/>,app)
    </script>

state（狀態）：組件本身可修改的狀態（數據）配合setState(params)使用：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="./react.min.js"></script>
        <script src="./react-dom.min.js"></script>
        <script src="./browser.min.js"></script>
        <style>

        </style>
    </head>

    <body>
        <div id="app"></div>
        <script type="text/babel">
            var Hello = React.createClass({
                getInitialState(){//設置state的數據
                return {
                    name:'World'
                }
            },
            render:function () {
              return (
                  <div>
                      {this.state.name}{/*這裏渲染了state的name*/}
                  </div>
              )
          }
      })
      ReactDOM.render(<Hello/>,app)
    </script>
    </body>

</html>

生命週期：

React組件生命週期：

初始化：

執行getDefaultProps鉤子函數，執行一次，掛載屬性props（無Dom元素，有組件相關的this可是沒法獲取數據）
執行getInitialState鉤子函數，初始化自身狀態state（同上，無Dom元素，有組件相關的this，可是沒法獲取數據）
componentWillMount（）掛載前（相似於Vue的created加beforeMount階段，能夠進行數據請求（ajax））
componentDidMount（）掛載完成（有Dom元素，數據準備完畢）

運行中：

componentWillReceiveProps函數：當props發生變化時調用
shouldComponentUpdate函數：主要作效率優化，控制組件是否隨之更新，函數返回的true或false表示視圖是否渲染，如：在函數中比較this.props.name（數據更新前）和props.name（數據更新後）對比，兩者是否相同，從而避免重複渲染，增強優化
componentWillUpdate函數：準備工做，不容許更改數值，不然會死循環，相似Vue中的beforeUpdate
render：從新渲染Dom
componentDidUpdate：頁面更新渲染完成，相似Vue的updated

組件銷燬：

componentWillUnmount：組件將要銷燬，能夠將定時器，事件等取消或結束（ReactDOM.unmountComponentAtNode(node) 銷燬節點中的組件）

相關標籤/搜索

每日一句

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