源文鏈接:https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html
Hello World
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
JSX
一個 JavaScript 的語法擴展.。
- const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; - 在 JSX 語法中,你可以在大括號內(nèi)放置任何有效的 JavaScript 表達式栏尚。例如,
2 + 2
用狱,user.firstName
或formatName(user)
都是有效的 JavaScript 表達式。 - JSX 也是一個表達式拼弃。
元素渲染
1.React 元素是不可變對象夏伊。一旦被創(chuàng)建,你就無法更改它的子元素或者屬性吻氧。一個元素就像電影的單幀:它代表了某個特定時刻的 UI溺忧。根據(jù)我們已有的知識,更新 UI 唯一的方式是創(chuàng)建一個全新的元素盯孙,并將其傳入 ReactDOM.render()
鲁森。
- React 只更新它需要更新的部分。
組件 & Props
- 定義組件最簡單的方式就是編寫 JavaScript 函數(shù):
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- 你同時還可以使用 ES6 的 class 來定義組件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
3.Props 的只讀性振惰。所有 React 組件都必須像純函數(shù)一樣保護它們的 props 不被更改歌溉。
4.渲染組件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
State & 生命周期
- 不要直接修改 State。(this.setState)
- State 的更新可能是異步的骑晶。
- State 的更新會被合并痛垛。
- 數(shù)據(jù)是向下流動的。
事件處理
- React 事件的命名采用小駝峰式(camelCase)透罢,而不是純小寫榜晦。使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù)冠蒋,而不是一個字符串羽圃。
- this.handleClick = this.handleClick.bind(this);bind綁定this
條件渲染
React 中的條件渲染和 JavaScript 中的一樣,使用 JavaScript 運算符 if
或者條件運算符去創(chuàng)建元素來表現(xiàn)當前的狀態(tài),然后讓 React 根據(jù)它們來更新 UI朽寞。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
在極少數(shù)情況下识窿,你可能希望能隱藏組件,即使它已經(jīng)被其他組件渲染脑融。若要完成此操作喻频,你可以讓 render 方法直接返回 null,而不進行任何渲染肘迎。
列表&Key
- key 只是在兄弟節(jié)點之間必須唯一
- key 會傳遞信息給 React 甥温,但不會傳遞給你的組件。如果你的組件中需要使用 key 屬性的值妓布,請用其他屬性名顯式傳遞這個值姻蚓。即props.key讀取不到key的值。
表單
受控組件
- <input type="text">, <textarea> 和 <select> 之類的標簽都非常相似—它們都接受一個 value 屬性匣沼,你可以使用它來實現(xiàn)受控組件狰挡。
- 你可以將數(shù)組傳遞到 value 屬性中,以支持在 select 標簽中選擇多個選項:
<select multiple={true} value={['B', 'C']}> - <input type="file" /> value只讀释涛,非受控加叁。
- 當需要處理多個 input 元素時,我們可以給每個元素添加 name 屬性唇撬,并讓處理函數(shù)根據(jù) event.target.name 的值選擇要執(zhí)行的操作它匕。
狀態(tài)提升
在 React 中,將多個組件中需要共享的 state 向上移動到它們的最近共同父組件中窖认,便可實現(xiàn)共享 state超凳。這就是所謂的“狀態(tài)提升”。
- 保留三位小數(shù)并四舍五入后的轉(zhuǎn)換結果:Math.round(output * 1000) / 1000;round() 方法可把一個數(shù)字舍入為最接近的整數(shù)耀态。
- 在 React 應用中轮傍,任何可變數(shù)據(jù)應當只有一個相對應的唯一“數(shù)據(jù)源”。通常首装,state 都是首先添加到需要渲染數(shù)據(jù)的組件中去创夜。然后,如果其他組件也需要這個 state仙逻,那么你可以將它提升至這些組件的最近共同父組件中驰吓。你應當依靠自上而下的數(shù)據(jù)流,而不是嘗試在不同組件間同步 state系奉。
包含關系
使用一個特殊的 children prop 來將他們的子組件傳遞到渲染結果中
- 少數(shù)情況下檬贰,你可能需要在一個組件中預留出幾個“洞”。這種情況下缺亮,我們可以不使用 children翁涤,而是自行約定:將所需內(nèi)容傳入 props,并使用相應的 prop。
- React 元素本質(zhì)就是對象(object)葵礼,所以你可以把它們當作 props号阿,像其他數(shù)據(jù)一樣傳遞。這種方法可能使你想起別的庫中“槽”(slot)的概念鸳粉,但在 React 中沒有“槽”這一概念的限制扔涧,你可以將任何東西作為 props 進行傳遞。
- 組合也同樣適用于以 class 形式定義的組件届谈。
React哲學
- 將設計好的 UI 劃分為組件層級枯夜。
- 用 React 創(chuàng)建一個靜態(tài)版本。(最好將渲染 UI 和添加交互這兩個過程分開艰山,props 是父組件向子組件傳遞數(shù)據(jù)的方式卤档。即使你已經(jīng)熟悉了 state 的概念,也完全不應該使用 state 構建靜態(tài)版本程剥。state 代表了隨時間會產(chǎn)生變化的數(shù)據(jù)劝枣,應當僅在實現(xiàn)交互時使用。所以構建應用的靜態(tài)版本時织鲸,你不會用到它舔腾。)
- 確定 UI state 的最小(且完整)表示搂擦。(該數(shù)據(jù)是否是由父組件通過 props 傳遞而來的稳诚?如果是,那它應該不是 state瀑踢。該數(shù)據(jù)是否隨時間的推移而保持不變扳还?如果是,那它應該也不是 state橱夭。你能否根據(jù)其他 state 或 props 計算出該數(shù)據(jù)的值氨距?如果是,那它也不是 state棘劣。)
- 確定 state 放置的位置(React 中的數(shù)據(jù)流是單向的俏让,并順著組件層級從上往下傳遞。)
5.添加反向數(shù)據(jù)流茬暇。