React基礎（二）

前言

前一篇 React基礎(一) 簡單地瞭解了 React 的一些基本知識點，怎麼搭建一個簡單的 React 項目、怎麼建立 React 元素、組件以及怎麼給項目添加樣式這些基礎功能。下面，在經過一些示例來了解 React 中的事件處理、條件渲染、列表處理等功能

若是文章中有出現紕漏、錯誤之處，還請看到的小夥伴多多指教，先行謝過

如下↓

Round 1 事件處理

首先，咱們看一下怎麼給元素綁定事件

React 事件的命名採用小駝峯式

<button onClick={ function() { console.log('事件觸發了')} }>點我這裏</button>

onClick 後面能夠直接是一個函數或者函數名

在這裏咱們須要注意的是

在 React 中另外一個不一樣點是你不能經過返回 false 的方式阻止默認行爲。你必須顯式的使用 preventDefault

<a href="#" onClick={function(e){e.preventDefault();console.log('事件觸發了')}}>
  Click me
</a>

在咱們沒有添加 e.preventDefault() 以前，很明顯看到了頁面的刷新，阻止默認行爲以後就不會再出現那種狀況了

return false 也是沒有效果的

Round 2 setState

在以前一篇文章中，咱們大概知道了能夠經過 state 去管理組件內部的數據，那麼應該怎麼正確地使用它呢、或者說咱們怎麼經過 state 去修改組件內部的數據

• 首先，不要直接去修改 state

this.state.age = 18 // 這是錯誤的

在 React 中咱們經過 setState() 去修改數據，這個和小程序的修改數據方式有點相似

this.setState({age: 18})

經過一個點擊事件再來感覺一下 setState()

細心地小夥伴可能發現了 這麼一行代碼：

this.addAge = this.addAge.bind(this)

這一步的做用其實就是給這個方法綁定 this ，在 JavaScript 中，class 的方法默認不會綁定 this ，若是咱們沒有這一步操做，那麼 this 的值就會是 undefined

還有兩種方式去解決這個問題：

public class fields 語法

這裏須要注意的一點，若是咱們要使用這個語法，那麼你的 babel 版本必須是 7.x 以上，相應的 babel-loader 必須是 8.x 以上版本，不然會報錯 具體配置能夠 參考這裏

使用箭頭函數

箭頭函數默認綁定定義時的 this

Round 3 條件渲染

不少時候，用戶可能會有多種操做需求，這個時候就須要咱們對不一樣的操做選擇不一樣的執行邏輯

在 React 中，你能夠建立不一樣的組件來封裝各類你須要的行爲

React 中的條件渲染和 JavaScript 中的同樣，使用 JavaScript 運算符 if 或者條件運算符去建立元素來表現當前的狀態，而後讓 React 根據它們來更新 UI

好比，咱們建立一個十分簡單的登錄註冊切換

首先，建立兩個組件來展現登錄或者註冊

function Login(props) {
    return (
        <button onClick={props.onClick}>去登錄</button>
    )
}

function Registered(props) {
    return (
        <button onClick={props.onClick}>去註冊</button>
    )
}

接着，建立一個有狀態的組件 LoginControl，在 state 中維護一箇中間變量控制渲染哪個組件，建立兩個方法去改變這個中間變量的值

this.state = {isLogin: false}

handelLogin() {
    this.setState({isLogin: true})
}

handelReginstered() {
    this.setState({isLogin: false})
}

最終，在 render 函數中，咱們經過 if 判斷中間變量 isLogin 的值去決定渲染哪一個組件

const isLogin = this.state.isLogin
let button 

if(isLogin) {
    button = <Login onClick={this.handelReginstered}></Login>
} else {
    button = <Registered onClick={this.handelLogin}></Registered>
}

這樣經過將中間變量的值傳遞給組件的方式就實現了按照不一樣條件渲染不一樣組件的需求

固然，咱們也可使用更爲簡單的一種方式，好比 三目運算符。經過中間變量的值，來選擇須要顯示的 placeholder

<input placeholder={isLogin ? '註冊用戶名': '登錄用戶名'}></input>

具體 Demo 能夠 參考這裏 main-3.js

Round 4 循環處理

在實際的開發中，咱們不可避免地會碰到列表這類數據的渲染。該怎麼去處理這類數據，我相信大家腦海中浮現的第一種方式確定就是循環

在 React 中處理數組轉化爲元素列表的方式基本就是這樣

咱們作一個 li 元素的遍歷效果

const numbers = [1, 2, 3, 4, 5]

function NumberList(props) {
    let numbers = props.numbers
    let numberLists = numbers.map(res => <li>{ res }</li>)
    return ( <ul>{ numberLists }</ul> )
}
ReactDom.render(<NumberList numbers={ numbers } />, document.getElementById('app'))

使用 map 方法遍歷數組，生成 li 元素，插入到 ul 元素中，最後在頁面渲染.能夠看到元素已經成功渲染到了頁面

徹底按照上面的方式建立 ul li 元素，毫無懸念咱們會收穫一個警告，大概長這樣

很明顯，咱們缺乏一個 key 元素

key 幫助 React 識別哪些元素改變了，好比被添加或刪除。所以你應當給數組中的每個元素賦予一個肯定的標識

簡單修改一下應該是這樣的

let numberLists = numbers.map(res => <li key={res.toString()}>{ res }</li>)

key 元素的存在提升了組件變化、比對的效率，合理使用 key 須要注意如下幾點：

• 一個元素的 key 最好是這個元素在列表中擁有的一個獨一無二的字符串,好比 id
• 元素的 key 只有放在就近的數組上下文中才有意義(簡單來講，哪裏循環在哪裏定義 key )
• key 只是在兄弟節點之間必須惟一,它們不須要是全局惟一的。當咱們生成兩個不一樣的數組時，咱們可使用相同的 key 值

Round 5 受控組件

在 React 中，可變的狀態通常都保存在 state 中，若是咱們想要去改變這個狀態，就要經過 setState 的方式進行更新。可是，用戶可輸入的表單元素會維持自身狀態，根據用戶輸入進行更新，這樣 就引出了 受控組件 的概念

受控組件的特色：

• 表單元素
• 由 React 渲染出來
• 由 React 控制值的改變，也就是說想要改變元素的值，只能經過 React 提供的方法來修改

<!-- 只讀: 只能讀取的input框 只展現 -->
<input value={this.state.data} readOnly></input>

<!--change事件-->
<input value={this.state.data} onChange={this.inputChange}></input>

<!-- defaultValue 非受控組件 -->
<input defaultValue={this.state.data}></input>

React提供了三種方式來處理表單元素

• 能夠添加 readOnly 設置爲只讀
• 添加 change 事件，經過 setState 處理表單狀態
• 設置 value 爲 defaultValue 只執行第一次渲染

後記

以上就是 React 中一部分基礎概念，有興趣的小夥伴能夠 點擊這裏 查看完整示例 Demo

感興趣的小夥伴能夠 點擊這裏 瞭解更多前端片斷，歡迎關注 star