2. 事件監聽理解
3. es6常用新語法
共同的資料放在父元件上, 特有的資料放在自己元件內部(state)
通過props可以傳遞一般資料和函式資料, 只能一層一層傳遞
一般資料–>父元件傳遞資料給子元件–>子元件讀取資料
函式資料–>子元件傳遞資料給父元件–>子元件呼叫函式
工具庫：pubsubjs文件：
使用：
例子1：
// import pubsub from 'pubsub-js'
// or when using commonjs
const pubsub =
require
('pubsub-js');
//訂閱訊息
var token = pubsub.
subscribe
('my topic'
,(msg, data)
=>);
//發布訊息
pubsub.
publish
('my topic'
,'hello world!'
);
//當setstate改變時呼叫
shouldcomponentupdate
(nextprops, nextstate)
}render()
}card.jsx
import react,
from
'react'
import proptypes from
'prop-types'
export
default
class
card
extends
component
render()
=this
.props
return
("card" key=
>
target=
"_blank"
>
style=
} alt=
'user'
/>
<
/a>
"card-text"
>
<
/p>
<
/div>)}
}list.jsx
import react,
'react'
import axios from
'axios'
import card from
'./card'
import pubsub from
"pubsub-js"
;export
default
class
list
extends
component
componentdidmount()
)//傳送請求
axios.
get(
""+ searchname +
"&sort=stars").
then
(response =>)}
).catch
(error =>)}
)})}
render()
elseif(
this
.state.loading)
elseif(
this
.state.error)
<
/h2>
}else
key=
/>))
}<
/div>)}
}}search.jsx
import react,
from
'react'
import pubsub from
'pubsub-js'
export
default
class
search
extends
component
render()
/>
>search<
/button>
<
/div>
<
/section>)}
}
繫結事件監聽
觸發事件
繫結事件監聽
觸發事件(編碼)
定義常量/變數: const/let
解構賦值:let = this.props/import from '***'
物件的簡潔表達:
箭頭函式:
優點:擴充套件(三點)運算子: 拆解物件(const myprops = {}, )
類: class/extends/constructor/super
es6模組化: export default | import
react學習六 react路由
react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則，在 route 上，有兩個比較重要的屬性，path component link 表示乙個路由的鏈結 就好比 v...
React提高05 高階元件
高階元件 簡稱hoc 的目的就是實現 的復用，它不是react的api，而是根據react的特性形成的一種開發正規化。它接受乙個元件作為引數並返回乙個新的元件 return class hoc extends react.component hoc中並沒有修改輸入的元件，也沒有通過繼承來擴充套件元件...
React學習 一 安裝React環境
建議碼友們一定要看react官方文件哦！1.node.js安裝 如果沒有安裝的小夥伴，看這裡node安裝教程 安裝之後一定要檢驗一下版本號是否出來了 2.安裝 簡單說一下 npx 的作用如 1.預設情況下，首先檢查路徑中是否存在要執行的包 即在專案中 2.如果存在，它將執行 3.若不存在，意味著尚未...