條件渲染
- if、&&、||、三元表達式
列表 & Keys
- 循環(huán)列表時需要給每一項加上獨一無二的key;
- 提取出一個 ListItem 組件吸申，你應(yīng)該把 key 保存在數(shù)組中的這個 <ListItem /> 元素上锦聊，而不是放在 ListItem 組件中的 <li> 元素上;
- 元素的 key 在他的兄弟元素之間應(yīng)該唯一;
- jsx的{}表達式中不能出現(xiàn)var,const,let等這種關(guān)鍵字歹嘹。
組件API
-
設(shè)置狀態(tài)：setState
參數(shù)格式
setState(object nextState[, function callback])參數(shù)說明
nextState，將要設(shè)置的新狀態(tài)孔庭，該狀態(tài)會和當前的state合并 callback尺上，可選參數(shù)，回調(diào)函數(shù)圆到。該函數(shù)會在setState設(shè)置成功怎抛，且組件重新渲染后調(diào)用。 合并nextState和當前state芽淡，并重新渲染組件马绝。setState是React事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法。 -
替換狀態(tài)：replaceState （將被棄用）
參數(shù)格式
replaceState(object nextState[, function callback])
參數(shù)說明
nextState吐绵，將要設(shè)置的新狀態(tài)迹淌，該狀態(tài)會替換當前的state。
callback己单，可選參數(shù)唉窃，回調(diào)函數(shù)。該函數(shù)會在replaceState設(shè)置成功纹笼，且組件重新渲染后調(diào)用纹份。
replaceState()方法與setState()類似，但是方法只會保留nextState中狀態(tài)廷痘，原state不在nextState中的狀態(tài)都會被刪除蔓涧。 -
設(shè)置屬性：setProps
參數(shù)格式
setProps(object nextProps[, function callback])
參數(shù)說明
nextProps，將要設(shè)置的新屬性笋额，該狀態(tài)會和當前的props合并
callback元暴，可選參數(shù)，回調(diào)函數(shù)兄猩。該函數(shù)會在setProps設(shè)置成功茉盏，且組件重新渲染后調(diào)用。
設(shè)置組件屬性枢冤，并重新渲染組件鸠姨。使用場景
props相當于組件的數(shù)據(jù)流，它總是會從父組件向下傳遞至所有的子組件中淹真。當和一個外部的JavaScript應(yīng)用集成時讶迁，我們可能會需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染，可以使用setProps()核蘸。
更新組件巍糯，我可以在節(jié)點上再次調(diào)用React.render()啸驯，也可以通過setProps()方法改變組件屬性，觸發(fā)組件重新渲染鳞贷。 -
替換屬性：replaceProps
參數(shù)格式
replaceProps(object nextProps[, function callback])
參數(shù)說明
nextProps坯汤，將要設(shè)置的新屬性，該屬性會替換當前的props搀愧。
callback，可選參數(shù)疆偿，回調(diào)函數(shù)咱筛。該函數(shù)會在replaceProps設(shè)置成功，且組件重新渲染后調(diào)用杆故。
replaceProps()方法與setProps類似迅箩，但它會刪除原有 props -
強制更新：forceUpdate
參數(shù)格式
forceUpdate([function callback])
參數(shù)說明
callback，可選參數(shù)处铛，回調(diào)函數(shù)饲趋。該函數(shù)會在組件render()方法調(diào)用后調(diào)用。
使用場景
forceUpdate()方法會使組件調(diào)用自身的render()方法重新渲染組件撤蟆，組件的子組件也會調(diào)用自己的render()奕塑。但是，組件重新渲染時家肯，依然會讀取this.props和this.state龄砰，如果狀態(tài)沒有改變，那么React只會更新DOM讨衣。
forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后）换棚，通過該方法通知React需要調(diào)用render()
一般來說，應(yīng)該盡量避免使用forceUpdate()反镇，而僅從this.props和this.state中讀取狀態(tài)并由React觸發(fā)render()調(diào)用 -
獲取DOM節(jié)點：findDOMNode
獲取操作：
ReactDOM.findDOMNode(this.refs.counterDom)固蚤，日中refs掛載在真實DOM節(jié)點處，類似vue的this.$refs.XXX使用場景
可以用來操作DOM -
判斷組件掛載狀態(tài)：isMounted
注意
isMounted 的方法在 ES6 中已經(jīng)廢除歹茶。主要的原因是它經(jīng)過實際使用與測試可能不足以檢測組件是否掛載夕玩，尤其是對于有一些異步的程序情況，以及邏輯上造成混亂×究鳎現(xiàn)在用以下方法代替： componentDidMount() { this.mounted = true; } componentWillUnmount() { this.mounted = false; }
條件渲染
- 初始渲染頁面在componentDidMount生命周期里使用
使用場景
React 組件的數(shù)據(jù)可以通過 componentDidMount 方法中的 Ajax 來獲取风秤，當從服務(wù)端獲取數(shù)據(jù)時可以將數(shù)據(jù)存儲在 state 中，再用 this.setState 方法重新渲染 UI扮叨。
當使用異步加載數(shù)據(jù)時缤弦，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。
React 表單與事件
- HTML 表單元素與 React 中的其他 DOM 元素有所不同,因為表單元素生來就保留一些內(nèi)部狀態(tài);
- 在 HTML 當中彻磁，像 <input>, <textarea>, 和 <select> 這類表單元素會維持自身狀態(tài)碍沐，并根據(jù)用戶輸入進行更新;
- 但在React中狸捅，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 setState() 方法進行更新;
- 在 React 中累提，不使用 selected 屬性尘喝，而在根 select 標簽上用 value 屬性來表示選中項，
如 <select value={this.state.value} onChange={this.handleChange}></select>; - 處理多個表單：當你有處理多個 input 元素時斋陪，你可以通過給每個元素添加一個 name 屬性朽褪，來讓處理函數(shù)根據(jù) event.target.name 的值來選擇做什么
- 當你需要從子組件中更新父組件的 state 時，你需要在父組件通過創(chuàng)建事件句柄 (handleChange) 无虚，并作為 prop (updateStateProp) 傳遞到你的子組件上
父組件：
class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello React!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: 'React'}) } render() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }子組件
render() { return <div> <button onClick = {this.props.updateStateProp}>點我</button> <h4>{this.props.myDataProp}</h4> </div> }
