React入門(2)

時間 2019-12-11

標籤 react 入門欄目 React 简体版

原文原文鏈接

承接上次學習的react,今天繼續學習reacthtml

劃重點！！！vue

今天學習的全是react的核心概念:①props②ref③statereact

一.核心概念---propsbabel

做用:主要用來實現父子組件通訊dom

1. 使用props來實現父子組件通訊(父傳子)-----跟vue的props用法差很少函數

步驟1：父組件發送
<Son sonName='zhangsan'></Son>
步驟2：子組件接收
this.props.sonName學習

來個栗子練習:ui

2.2 使用props來實現子父組件通訊(子傳父)this

原理: 經過自定義屬性是能夠傳遞一個方法的！spa

步驟1：在父組件中定義一個有參數的方法
rcvMsg:function(msg){}
步驟2：父組件調用子組件時，經過自定義屬性將方法傳遞給子組件
<Son myFunc={this.rcvMsg}></Son>
步驟3：子組件調用父組件傳來的方法，並進行傳值
this.props.myFunc(123)

舉個栗子demo08:

再來一個栗子demo09加深印象:

3. this.props.children

this.props對象的鍵值對和組件調用時的屬性是一一對應的，可是有一個例外:this.props.children

類型：
array：嵌套的子標記有多個
obj:嵌套的子標記有1個
undefined:沒有嵌套

爲了防止由於類型而致使的錯誤，react官方提供了一個方法:
React.Children.map(
this.props.children,
function(child){}
)

直接來個栗子demo0:

二.核心概念--ref

ref(reference)，能夠幫助獲得組件類的實例的引用 (父組件主動的到子組件中獲取數據)

使用步驟：
①給咱們要查找的元素或者組件指定一個ref屬性
<any ref='myTest'></any>
②經過refs去獲取ref對應的元素或者組件
this.refs.myTest.**

這個很簡單，就上個栗子demo11：

三.核心概念--state

1.state是負責完成數據在組件內部的定義、讀寫操做
2.基本功能：
①數據綁定:
將狀態中的數據綁定到視圖：數據變化，視圖就會更新 MVP模式

這裏簡要講解一下MVP模式

MVP 全稱：Model-View-Presenter ；MVP 是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數據，View負責顯示。

看下圖:

P在這裏至關於一箇中間者的校色，view裏面須要M裏的東西，就告訴P，p再告訴M，P作出相應的變化，M能夠保持不變；model裏面須要M裏的東西，就告訴P，p再告訴View，P作出相應的變化，View能夠保持不變.

至於什麼是MVC模式，什麼是MVVM(典型的vue中的雙向綁定的原理)，這裏就不討論了，有興趣的能夠本身去查閱資料。

{this.state.count}
②完成數據的基本管理，包括初始化、讀、寫
3.用法

初始化:
getInitialState:function(){
return {count:0,age:10}
}
讀：
this.state.count
this.state.age
寫：
this.setState({count:1})
this.setState({count:1,age:1})
this.setState({count:2},()=>{
//狀態寫操做成功以後的回調函數
})

今天的重點已經講完了，如今來個綜合練習:

以下圖:

在輸入框中輸入值，控制檯實時打印輸入框中的結果，當輸入完畢後點擊按鈕，打印輸入的真實值

最後的代碼:

 1 <!-- !+tab -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="js/react.js"></script>
10   <script src="js/react-dom.js"></script>
11   <script src="js/browser.min.js"></script>
12 </head>
13 <body>
14   <div id='example'></div>
15   <script type="text/babel">
16     var AComponent = React.createClass({
17       handleChange:function(){
18         //獲取輸入框的值
19         var myValue = this.refs.myInput.value
20         console.log("輸入框當前的數據是",myValue)
21         //將值發送父組件MainComponent
22         this.props.myFunc(myValue)
23       },
24       render:function(){
25         return <input ref="myInput" onChange={this.handleChange} type='text' placeholder="plz input sth"/>
26       }
27     })
28 
29     var BComponent = React.createClass({
30       handleClick:function(){
31         //讀取經過自定義屬性myValue所傳來的數據
32         console.log(this.props.myValue)
33       },
34       render:function(){
35         return <button onClick={this.handleClick}>
36           clickMe
37         </button>
38       }
39     })
40     // 將myContent的全部操做按照state來重構
41     //(:- 15:15)
42     var MainComponent = React.createClass({
43       //myContent:"",
44       getInitialState:function(){
45         return {myContent:""}
46       },
47       rcv:function(msg){
48         console.log("父組件接收到子組件傳來的數據是",msg);
49         //this.myContent = msg;//保存數據
50         this.setState({myContent:msg});
51       },
52       render:function(){
53         return <div>
54           <AComponent myFunc={this.rcv}></AComponent>
55           <BComponent myValue={this.state.myContent}></BComponent>
56         </div>
57       }
58     })
59 
60     ReactDOM.render(
61       <MainComponent></MainComponent>,
62       document.getElementById('example')
63     )
64   </script>
65   
66 </body>
67 </html>