-
創(chuàng)建Context對象
把想要使用Context數(shù)據(jù)的節(jié)點換成<定義的文件名.Provider></定義的文件名.Provider>
查看全部 -
Context 全局數(shù)據(jù)
查看全部 -
由上而下的數(shù)據(jù)流 單向數(shù)據(jù)流 所以數(shù)據(jù)處理放在父組件中
子組件向父組件傳值：this.props.方法名(值)查看全部 -
受控組件
非受控組件 將真實數(shù)據(jù)保存在dom中 因此在使用非受控組件時 更容易同時集成React和非React的代碼 如果想要快速而隨性、并且減少代碼量 可以使用非受控組價 否則需要使用受控組件
查看全部 -
示例 使用到了某些生命周期
查看全部 -
組件的生命周期：
組件初始化、組件更新、組件卸載
constructor 數(shù)據(jù)的初始化
componentWillMount 在掛載前也就是render之前被調用
getDerivedStateFromProps 從props中獲取到state
render 插入jsx生成的dom結構
componentDidMount 組件掛載后立即調用 通常在這調用ajax請求
getDerivedStateFromProps
shouldComponentUpdate 到新的props或者state時都會調用，通過返回true或者false告知組件更新與否
render
getSnapshotBeforeUpdate
componentDidUpdate 組件更新結束后觸發(fā)
componentWillUnmount
查看全部 -
點擊事件（兩種方式）
onClick={this.handleClick.bind(this)}
onClick={() => {this.handleClick()}}
查看全部 -
State
this.setState 更改State中的值
constructor這是ES6對類(Class)的默認方法，一般用于數(shù)據(jù)初始化，通過?new?命令生成對象實例時自動調用該方法。并且，該方法是類中必須有的，如果沒有顯示定義，則會默認添加。
super
繼承它的父級
子類必須在constructor() 中調用 super() ，否則新建實例時會報錯查看全部 -
Props
父組件向子組件傳輸數(shù)據(jù)：
子組件接收父組件的數(shù)據(jù)（props）：
子組件接收的值是只讀的（要像純函數(shù)一樣使用props參數(shù)）
在一個函數(shù)內 不改變接收的參數(shù)稱為純函數(shù)
查看全部 -
JSX被babel編譯過
JSX只是一種語法糖 是React.createElement的語法糖
（簡單明了易懂）查看全部 -
jsx
是JavaScript的一種語法擴展（內部實現(xiàn)的）
語法是{} 可寫入表達式
寫入樣式 className
htmlFor??HTML?標簽的 for 屬性?規(guī)定 label 與哪個表單元素綁定查看全部 -
Render方法 代表組件渲染出來的結果
ReactDom.render方法 可以把寫好的組件掛載在dom節(jié)點上查看全部 -
npm install create-react-app -g
create-react-app project-name查看全部 -
聲明式的寫法；組件化；一處學習，隨處編寫
查看全部 -
狀態(tài)提升
單項數(shù)據(jù)流
查看全部 -
組件初始化：
組件更新
組件卸載
查看全部 -
React屬性 class?Namecard?extends?React.Component?{ ????render(){ ??????const?{?name,?number,?isHuman,?tags?}?=?this.props ??????return( ????????<div> ??????????<h4>{name}</h4> ??????????<ul> ???????????<li>電話：1234567890</li> ???????????<li>{?isHuman???'人類'?：'外星生物'}</li> ???????????<hr/> ???????????<p> ???????????{?tags.map((tag,?index)?=>?( ???????????????<span>?{tag}</span> ???????????))} ???????????</p> ??????????</ul> ????????</div> ??????) ????} } export?default?NameCard查看全部 -
JSX:JavaScript的語法擴展，也為Js的語法糖，可以使用{}內嵌任何JavaScript表達式，Jsx屬性 class?welcom?extends?React.component?{ ????render(){ ??????const?todolist?=?['Learn?React',?'Learn?Redux'] ??????return( ??????????<div> ??????????????<h1>Hello?React</h1> ??????????????<ul>? ??????????????{ ??????????????todolist.map(item?=> ??????????????<li>{item}</li> ??????????????) ??????????????} ??????????????</ul> ??????????</div> ??????) ????} } ????export?default?Welcome查看全部 -
State（狀態(tài)）
組件內部的數(shù)據(jù) 可以動態(tài)改變
查看全部 -
Props（屬性）
組件像一個函數(shù)一樣，接受特定的輸入（props），產出特定的輸出（React elements）
V = f(props)
查看全部 -
Props屬性是由上到下單向傳遞的
Context提供了在組件中共享此類值的方法，設計目的是共享那些對于組件來說全局的數(shù)據(jù)
不要僅僅為了避免在幾個層級下的組件傳遞props而使用context
查看全部 -
JSX是一種語法糖
查看全部 -
JSX是一種JavaScript語法擴展
用花括號，在其中添加任意的表達式
屬性與html屬性非常一直，不同點在于類用className，for改為htmlFor
查看全部 -
React? 用于創(chuàng)建用戶界面的JavaScript庫
聲明式的寫法
組件化
一次學習，隨處編寫
查看全部 -
在 react 中，創(chuàng)建某一個響應式數(shù)據(jù)可以使用在 this.state = {} 中添加屬性的方法，這一點和 Vue 有明顯的不同，Vue 是在 data 屬性中添加響應式數(shù)據(jù)；
?class?LikeBtn?extends?React.component?{? ?????constructor(props)?{ ?????super(props) ?????this.state?=?{ ?????????likes:?0 ?????} ?????} }在 react 中，添加事件和事件監(jiān)聽函數(shù)：
例如：點擊事件:??onclick、事件監(jiān)聽函數(shù): increaseLikes
使用駝峰命名原生 JS 事件onClick
并在 {} 中添加 this.increaseLikes
第一種寫法：
increaseLikes()?{ ????//?... } render()?{ ????return?( ????????<button?onClick={this.increaseLikes}>?like+?</button> ????) }第二種寫法：
increaseLikes()?{ ????//?... } render()?{ ????return?( ????????<button?onClick={()?=>?{this.increaseLikes()}}>?like+?</button> ????????{?this.state.likes?} ????) }上述兩種寫法，在 JSX 種使用箭頭函數(shù)可以省略在組件 constructor? 中在 this.increaseLikes 上綁定 this 的步驟；
如果不使用箭頭函數(shù)，必須要在組件 constructor? 中在 this.increaseLikes 上綁定 this，否則在事件監(jiān)聽函數(shù)中 this 為 undefined；
在事件監(jiān)聽函數(shù)中更改 state 里的數(shù)據(jù)時，需要使用 this.setState() 方法，傳入對象，這里的對象就是 state 對象，用更改對象屬性的方法更改 state 中的數(shù)據(jù)；
查看全部 -
1111
查看全部 -
5555
查看全部 -
yyy
查看全部 -
11111
查看全部
舉報