14. 參數(shù)傳遞噩翠，詳見Context

    1. context:設(shè)計(jì)目的是為了共享那些對于一個(gè)組件樹而言是“全局”的數(shù)據(jù);主要應(yīng)用場景在于很多不同層級的組件需要訪問同樣一些的數(shù)據(jù);

       // Context 可以讓我們無須明確地傳遍每一個(gè)組件戏自，就能將值深入傳遞進(jìn)組件樹。
       // 為當(dāng)前的 theme 創(chuàng)建一個(gè) context（“l(fā)ight”為默認(rèn)值）伤锚。
       const ThemeContext = React.createContext('light');
       
       class App extends React.Component {
         render() {
           // 使用一個(gè) Provider 來將當(dāng)前的 theme 傳遞給以下的組件樹擅笔。
           // 無論多深，任何組件都能讀取這個(gè)值屯援。
           // 在這個(gè)例子中猛们，我們將 “dark” 作為當(dāng)前的值傳遞下去。
           return (
             <ThemeContext.Provider value="dark">
               <Toolbar />
             </ThemeContext.Provider>
           );
         }
       }
       
       // 中間的組件再也不必指明往下傳遞 theme 了狞洋。
       function Toolbar(props) {
         return (
           <div>
             <ThemedButton />
           </div>
         );
       }
       
       class ThemedButton extends React.Component {
         // 指定 contextType 讀取當(dāng)前的 theme context弯淘。
         // React 會(huì)往上找到最近的 theme Provider，然后使用它的值吉懊。
         // 在這個(gè)例子中庐橙，當(dāng)前的 theme 值為 “dark”。
         static contextType = ThemeContext;
         render() {
           return <Button theme={this.context} />;
         }
       }
    

    2. 組件組合（將組件傳入）

    <!--原-->
      <Page user={user} avatarSize={avatarSize} />
      // ... 渲染出 ...
      <PageLayout user={user} avatarSize={avatarSize} />
      // ... 渲染出 ...
      <NavigationBar user={user} avatarSize={avatarSize} />
      // ... 渲染出 ...
      <Link href={user.permalink}>
        <Avatar user={user} size={avatarSize} />
      </Link>
      
    <!--改：只有最頂部的 Page 組件需要知道 Link 和 Avatar 組件是如何使用 user 和 avatarSize 的借嗽。-->
      function Page(props) {
        const user = props.user;
        const userLink = (
          <Link href={user.permalink}>
            <Avatar user={user} size={props.avatarSize} />
          </Link>
        );
        return <PageLayout userLink={userLink} />;
      }
      
      // 現(xiàn)在态鳖，我們有這樣的組件：
      <Page user={user} avatarSize={avatarSize} />
      // ... 渲染出 ...
      <PageLayout userLink={...} />
      // ... 渲染出 ...
      <NavigationBar userLink={...} />
      // ... 渲染出 ...
      {props.userLink}
    

15. 錯(cuò)誤邊界

部分 UI 的 JavaScript 錯(cuò)誤不應(yīng)該導(dǎo)致整個(gè)應(yīng)用崩潰，為了解決這個(gè)問題恶导，React 16 引入了該概念浆竭；
錯(cuò)誤邊界是一種 React 組件，這種組件可以捕獲并打印發(fā)生在其子組件樹任何位置的 JavaScript 錯(cuò)誤惨寿，并且它會(huì)渲染出備用 UI邦泄，而不是渲染那些崩潰了的子組件樹。錯(cuò)誤邊界在渲染期間裂垦、生命周期方法和整個(gè)組件樹的構(gòu)造函數(shù)中捕獲錯(cuò)誤

16. 組件首字母必須大寫

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 錯(cuò)誤!!!虎韵！JSX 類型不能是一個(gè)表達(dá)式。
  return <components[props.storyType] story={props.story} />;
  // 正確!!!缸废！JSX 類型可以是大寫字母開頭的變量。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

17. 傳遞子集動(dòng)態(tài)變量(直接傳就行) 在此基礎(chǔ)上改

  render() {
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    const tmp = [
      {scale: 'c', key: celsius},
      {scale: 'f', key: fahrenheit},
    ]
    return (
      <div>
        {
          tmp.map(item => {
            return  <TemperatureInput
                scale={item.scale}
                temperature={item.key}
                onTemperatureChange={this.handelCommon}
              />
           })
        }
      </div>
    );
  }

14. 傳遞當(dāng)前event

 <!--react-->
 <input
   type="text"
   placeholder="Search..."
   value={this.props.filterText}
   onChange={(e)=>this.handleFilterTextChange('sth', e)}
 />
  <!--vue-->
  <searchInput
    v-model="params.nameKey"
    placeholder="搜索名稱"
    icon="android-close"
    @search="searchData"
    @clear="afterChange('nameKey', $event)"
  ></searchInput>

18. Portal 彈窗??
    Portal 提供了一種將子節(jié)點(diǎn)渲染到存在于父組件以外的 DOM 節(jié)點(diǎn)的優(yōu)秀的方案。
    典型用例是當(dāng)父組件有 overflow: hidden 或 z-index 樣式時(shí)企量，但你需要子組件能夠在視覺上“跳出”其容器测萎。例如，對話框届巩、懸浮卡以及提示框

19.componentWillReceiveProps
使用時(shí)最好比較兩個(gè)props一面陷入死循環(huán)硅瞧，不停更新組件參考

等等。恕汇。腕唧。

參考：

1. https://juejin.im/post/5c2de832f265da6172659b45
2. https://juejin.im/post/5b8b56e3f265da434c1f5f76

結(jié)語：
有咩有小伙伴能提供個(gè)更恰當(dāng)?shù)奈恼旅滞邸ｑⅰＴ娼印聡隆Ｈ鼻础Ｆ鹈麖U