React學習記錄

源文鏈接:https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html

Hello World

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

JSX

一個 JavaScript 的語法擴展.。

  1. const name = 'Josh Perez';
    const element = <h1>Hello, {name}</h1>;
  2. 在 JSX 語法中,你可以在大括號內(nèi)放置任何有效的 JavaScript 表達式栏尚。例如,2 + 2用狱,user.firstNameformatName(user) 都是有效的 JavaScript 表達式。
  3. JSX 也是一個表達式拼弃。

元素渲染

1.React 元素是不可變對象夏伊。一旦被創(chuàng)建,你就無法更改它的子元素或者屬性吻氧。一個元素就像電影的單幀:它代表了某個特定時刻的 UI溺忧。根據(jù)我們已有的知識,更新 UI 唯一的方式是創(chuàng)建一個全新的元素盯孙,并將其傳入 ReactDOM.render()鲁森。

  1. React 只更新它需要更新的部分。

組件 & Props

  1. 定義組件最簡單的方式就是編寫 JavaScript 函數(shù):
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  1. 你同時還可以使用 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 & 生命周期

  1. 不要直接修改 State。(this.setState)
  2. State 的更新可能是異步的骑晶。
  3. State 的更新會被合并痛垛。
  4. 數(shù)據(jù)是向下流動的。

事件處理

  1. React 事件的命名采用小駝峰式(camelCase)透罢,而不是純小寫榜晦。使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù)冠蒋,而不是一個字符串羽圃。
  2. 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

  1. key 只是在兄弟節(jié)點之間必須唯一
  2. key 會傳遞信息給 React 甥温,但不會傳遞給你的組件。如果你的組件中需要使用 key 屬性的值妓布,請用其他屬性名顯式傳遞這個值姻蚓。即props.key讀取不到key的值。

表單

受控組件
  1. <input type="text">, <textarea> 和 <select> 之類的標簽都非常相似—它們都接受一個 value 屬性匣沼,你可以使用它來實現(xiàn)受控組件狰挡。
  2. 你可以將數(shù)組傳遞到 value 屬性中,以支持在 select 標簽中選擇多個選項:
    <select multiple={true} value={['B', 'C']}>
  3. <input type="file" /> value只讀释涛,非受控加叁。
  4. 當需要處理多個 input 元素時,我們可以給每個元素添加 name 屬性唇撬,并讓處理函數(shù)根據(jù) event.target.name 的值選擇要執(zhí)行的操作它匕。

狀態(tài)提升

在 React 中,將多個組件中需要共享的 state 向上移動到它們的最近共同父組件中窖认,便可實現(xiàn)共享 state超凳。這就是所謂的“狀態(tài)提升”。

  1. 保留三位小數(shù)并四舍五入后的轉(zhuǎn)換結果:Math.round(output * 1000) / 1000;round() 方法可把一個數(shù)字舍入為最接近的整數(shù)耀态。
  2. 在 React 應用中轮傍,任何可變數(shù)據(jù)應當只有一個相對應的唯一“數(shù)據(jù)源”。通常首装,state 都是首先添加到需要渲染數(shù)據(jù)的組件中去创夜。然后,如果其他組件也需要這個 state仙逻,那么你可以將它提升至這些組件的最近共同父組件中驰吓。你應當依靠自上而下的數(shù)據(jù)流,而不是嘗試在不同組件間同步 state系奉。

包含關系

使用一個特殊的 children prop 來將他們的子組件傳遞到渲染結果中

  1. 少數(shù)情況下檬贰,你可能需要在一個組件中預留出幾個“洞”。這種情況下缺亮,我們可以不使用 children翁涤,而是自行約定:將所需內(nèi)容傳入 props,并使用相應的 prop。
  2. React 元素本質(zhì)就是對象(object)葵礼,所以你可以把它們當作 props号阿,像其他數(shù)據(jù)一樣傳遞。這種方法可能使你想起別的庫中“槽”(slot)的概念鸳粉,但在 React 中沒有“槽”這一概念的限制扔涧,你可以將任何東西作為 props 進行傳遞。
  3. 組合也同樣適用于以 class 形式定義的組件届谈。

React哲學

  1. 將設計好的 UI 劃分為組件層級枯夜。
  2. 用 React 創(chuàng)建一個靜態(tài)版本。(最好將渲染 UI 和添加交互這兩個過程分開艰山,props 是父組件向子組件傳遞數(shù)據(jù)的方式卤档。即使你已經(jīng)熟悉了 state 的概念,也完全不應該使用 state 構建靜態(tài)版本程剥。state 代表了隨時間會產(chǎn)生變化的數(shù)據(jù)劝枣,應當僅在實現(xiàn)交互時使用。所以構建應用的靜態(tài)版本時织鲸,你不會用到它舔腾。)
  3. 確定 UI state 的最小(且完整)表示搂擦。(該數(shù)據(jù)是否是由父組件通過 props 傳遞而來的稳诚?如果是,那它應該不是 state瀑踢。該數(shù)據(jù)是否隨時間的推移而保持不變扳还?如果是,那它應該也不是 state橱夭。你能否根據(jù)其他 state 或 props 計算出該數(shù)據(jù)的值氨距?如果是,那它也不是 state棘劣。)
  4. 確定 state 放置的位置(React 中的數(shù)據(jù)流是單向的俏让,并順著組件層級從上往下傳遞。)
    5.添加反向數(shù)據(jù)流茬暇。
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末首昔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子糙俗,更是在濱河造成了極大的恐慌勒奇,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巧骚,死亡現(xiàn)場離奇詭異赊颠,居然都是意外死亡格二,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門巨税,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人粉臊,你說我怎么就攤上這事草添。” “怎么了扼仲?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵远寸,是天一觀的道長。 經(jīng)常有香客問我屠凶,道長驰后,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任矗愧,我火速辦了婚禮灶芝,結果婚禮上,老公的妹妹穿的比我還像新娘唉韭。我一直安慰自己夜涕,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布属愤。 她就那樣靜靜地躺著女器,像睡著了一般。 火紅的嫁衣襯著肌膚如雪住诸。 梳的紋絲不亂的頭發(fā)上驾胆,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音贱呐,去河邊找鬼丧诺。 笑死,一個胖子當著我的面吹牛奄薇,可吹牛的內(nèi)容都是我干的锅必。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼惕艳,長吁一口氣:“原來是場噩夢啊……” “哼搞隐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起远搪,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤劣纲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谁鳍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體癞季,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡劫瞳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了绷柒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片志于。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖废睦,靈堂內(nèi)的尸體忽然破棺而出伺绽,到底是詐尸還是另有隱情,我是刑警寧澤嗜湃,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布奈应,位于F島的核電站,受9級特大地震影響购披,放射性物質(zhì)發(fā)生泄漏杖挣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一刚陡、第九天 我趴在偏房一處隱蔽的房頂上張望惩妇。 院中可真熱鬧,春花似錦筐乳、人聲如沸屿附。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挺份。三九已至,卻和暖如春贮懈,著一層夾襖步出監(jiān)牢的瞬間匀泊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工朵你, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留各聘,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓抡医,卻偏偏與公主長得像躲因,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子忌傻,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 3. JSX JSX是對JavaScript語言的一個擴展語法大脉, 用于生產(chǎn)React“元素”,建議在描述UI的時候...
    pixels閱讀 2,809評論 0 24
  • 作為一個合格的開發(fā)者水孩,不要只滿足于編寫了可以運行的代碼镰矿。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,428評論 1 33
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中俘种。 1. Hello world 這段代碼將一個一級標題插入到指...
    ryanho84閱讀 6,221評論 0 9
  • $ 前言 ? 最近在考慮框架轉(zhuǎn)型秤标,鑒于作為一名JSer绝淡,要時時刻刻保持對新技術和流行技術的敏感性,而 React苍姜、...
    果汁涼茶丶閱讀 21,993評論 5 32
  • 1牢酵、什么是react React.js 是一個幫助你構建頁面 UI 的庫。React.js 將幫助我們將界面分成了...
    谷子多閱讀 2,555評論 1 13