React 學(xué)習(xí)筆記（一）

筆記參考：阮一峰react入門教程

一、初識React

1.特點(diǎn)

  • 基于組件，組件里面有自己的state，用組件來做復(fù)雜的UI；
  • 用JavaScript語言邏輯而不是模板；
  • 當(dāng)你改變數(shù)據(jù)的時候它可以快速更新；
  • React不是一個完整的MVC，MVVM框架；
  • React跟Web Components不沖突；
  • React的特點(diǎn)是“輕”，渲染、響應(yīng)非?？欤?/li>
  • 組件化的開發(fā)思路，高度可重用。

2.看看一個簡單的組件例子

react組件用render（）方法傳入數(shù)據(jù)和返回。下面這個例子用了一種長得像XML的語法——jsx。輸入的數(shù)據(jù)可以通過render()的this.props來傳進(jìn)組件。

class HelloMessage extends React.Compontent {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}
ReactDOM.render(<HelloMessage name="Jane" />,mountNode);

二、各種例子

1. HTML模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="script/react.js"></script>
    <script src="script/react-dom.js"></script>
    <script src="script/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
     //這里寫你的react代碼，使用jsx語法
    </script>
  </body>
</html>

body內(nèi)的<script>標(biāo)簽，是寫入react代碼，由于react獨(dú)有的jsx語法，跟js不兼容，所以使用jsx的地方，type類型為type="text/babel"。

head標(biāo)簽內(nèi)引用了三個庫：react.js 、react-dom.js 和 Browser.js，它們必須首先加載。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關(guān)的功能，Browser.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法，這一步很消耗時間，實(shí)際上線的時候，應(yīng)該將它放到服務(wù)器完成。

eg：將一個 h1 標(biāo)題，插入 example 節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="script/react.js"></script>
    <script src="script/react-dom.js"></script>
    <script src="script/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
     ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
        );
    </script>
  </body>
</html>

運(yùn)行結(jié)果截圖：

Paste_Image.png
  • ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語言，并插入指定的 DOM 節(jié)點(diǎn)。render()方法的第一個參數(shù)是你要插入的模板，第二個參數(shù)是指定插入的節(jié)點(diǎn)的位置。

2. 遍歷一個數(shù)組插入節(jié)點(diǎn)中

<body>
<div id="example"></div>
<script type="text/babel">
var names = ['Mingming','XiaoHong','Baby'];
ReactDOM.render(
    <div>
        {
            names.map(function(name) {
                return <h1>Hello {name} !</h1>
            })
        }
    </div>,
    document.getElementById("example"));
</script>
</body>
  • 對names中的每一個元素都執(zhí)行一個匿名函數(shù)，這個匿名函數(shù)的參數(shù)name就是當(dāng)前的遍歷到的names的某一個元素，用這個元素替換“Hello {name}”的name位置，然后返回這個“h1”元素，將每一個返回的h1元素都插入到由document.getElementById("example")指定的節(jié)點(diǎn)位置，即插入到id值為“example”的div節(jié)點(diǎn)中。
Paste_Image.png

3. 插入JavaScript變量

<body>
<div id="example"></div>
<script type="text/babel">
var arr = [
    <h1>I am Array1!</h1>,
    <h1>I am Array2!</h1>
    ]
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById("example"));
</script>
</body>
Paste_Image.png

4. 封裝組件

<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
    render:function() {
        return <h1>Hello {this.props.name} !</h1>
    }
});
ReactDOM.render(<HelloMessage name="Qiapi"/>,document.getElementById("example"));
</script>
</body>
Paste_Image.png
  • 格式：
var 組件名(首字母一定大寫) = React.createClass({
   render:function() {
       return 返回的模板
   }
});
  • this.props.name傳入?yún)?shù)
  • 組件類只能包含一個頂層標(biāo)簽，即return 只能返回一個標(biāo)簽，不可以像下面這樣的return：
return <h1>haha</h1><p>hehe</p>//這是錯誤的
  • 添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

5. this.props.children

<body>
<div id="example"></div>
<script type="text/babel">
var NoteList = React.createClass({
    render:function() {
        return (
            <ol>
            {
                React.Children.map(this.props.children,function(child) {
                    return <li>{child}</li>
                })
            }
            </ol>
        )
    }
});
ReactDOM.render(
    <NoteList>
        <span>Hello</span>
        <span>World</span>
    </NoteList>,
    document.getElementById("example"));
</script>
</body>

6. PropsType

<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
    propTypes:{
    title:React.PropTypes.string.isRequired,//這句的意思是要求title的屬性是string
    },
    render:function() {
        return <h1>I say: {this.props.title}</h1>
    }
});
ReactDOM.render(
    <HelloMessage title="Here is a title"/>,
    document.getElementById("example"));
</script>
</body>
Paste_Image.png
  • propTypes用來設(shè)置屬性類型，上例中設(shè)置了string類型，所以在為組件設(shè)置title值的時候必須為string類型，如果將其設(shè)置為數(shù)字，則會報(bào)錯，例如：
Paste_Image.png
Paste_Image.png

可以這樣：

Paste_Image.png
Paste_Image.png
  • 注意不要直接把123寫到title里：
Paste_Image.png
  • 設(shè)置默認(rèn)的title值：
QQ圖片20161124235909.png
Paste_Image.png

7.refs 和 this.state

<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
    getInitialState:function() {
        return({text:''});
    },
    handleClick:function() {
        this.setState({text:this.refs.myTextInput.value});
    },
    render:function() {
        return (
        <div>
            <input type="text" ref="myTextInput"/>
            <input type="button" onClick={this.handleClick} value="click me!" />
            <p>{this.state.text}</p>
        </div>
        )
    }
})
ReactDOM.render(
    <MyComponent/>,document.getElementById("example"));
</script>
</body>
  • getInitialState:設(shè)置初始的state值；
  • handleClick:自定義的一個方法，用來處理點(diǎn)擊事件。為按鈕設(shè)置了onClick={this.handleClick}后，當(dāng)點(diǎn)擊按鈕時就會調(diào)用這個方法，進(jìn)行相應(yīng)的處理；
  • this.setState():設(shè)置this.state;
  • this.refs.myTextInput:ref值為myTextInput的元素；
  • 動態(tài)的數(shù)據(jù)不用 this.props 獲取，用 this.state;

8. 表單

<body>
<div id="example"></div>
<script type="text/babel">
    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 value={value} type="text" onChange={this.handleChange} />
                <p>{value}</p>
            </div>
            );
        }
    });
    
    ReactDOM.render(<Input/>,document.getElementById("example"));
</script>
</body>

三、組件的生命周期

  • 組件的生命周期分成三個狀態(tài)：

  • Mounting：已插入真實(shí) DOM

  • Updating：正在被重新渲染

  • Unmounting：已移出真實(shí) DOM

  • React 為每個狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

  • componentWillMount()

  • componentDidMount()

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

  • React 還提供兩種特殊狀態(tài)的處理函數(shù):

  • componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時調(diào)用

  • shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調(diào)用

<body>
<div id="example"></div>
<script type="text/babel">
    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.getElementById("example"));
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容