React 應(yīng)用程序是由組件組成的。

• react 程序是用的jsx語法，使用這種語法的代碼需要由babel進行解析，解析成js代碼。

  jsx語法：

  1. 只能返回一個根元素

  2. 所有的標(biāo)簽都必須閉合（自閉和或使用一對標(biāo)簽的方式閉合）

  3. 使用駝峰式命名法給大部分屬性命名如：className

  4. 大寫字母開頭的標(biāo)簽一般都是組件

  5. jsx標(biāo)簽的屬性，使用引號傳遞字符串，使用一組{和}傳遞js變量，且大括號中可以寫js的表達式，也可以傳遞使用個另外一對額外的大括號包裹對象。

  6. 標(biāo)簽中可以使用三目運算符

     在 JSX 中，{cond ? <A /> : <B />} 表示 “當(dāng) cond 為真值時, 渲染 <A />，否則 <B />”

     在 JSX 中，{cond && <A />} 表示 “當(dāng) cond 為真值時, 渲染 <A />，否則不進行渲染”。

     return (
       <li className="item">
         {isPacked ? name + ' ?' : name}
       </li>
     );
     

  7. 渲染列表：使用map()方法生成一組相似組件，使用filter()方法來篩選數(shù)組

     const listItems = chemists.map(person =>
       <li>...</li> // 隱式地返回！
     );
        
     const listItems = chemists.map(person => { // 花括號
       return <li>...</li>;
     });
     

• 組件引入語法用到了ES6的模塊化編程語法

  1. 解構(gòu)賦值語法：可以將數(shù)組中的值或?qū)ο蟮膶傩匀〕?，賦值給其他變量。

  2. 展開運算符：

     function Profile({ person, size, isSepia, thickBorder }) {
       return (
         <div className="card">
           <Avatar
             person={person}
             size={size}
             isSepia={isSepia}
             thickBorder={thickBorder}
           />
         </div>
       );
     }
     {/* 關(guān)于Avatar那一部分可以寫成 */}
     <Avatar {...props} />
     

• React 三大元素：

  • State對象（要將state視為只讀的）

    在數(shù)據(jù)發(fā)生改變之后頁面上的內(nèi)容才會重新渲染、

    • 設(shè)置 state 不會更改現(xiàn)有渲染中的變量，會請求一次新的渲染。
    • React 將 state 存儲在組件之外，就像在架子上一樣。
    • 當(dāng)你調(diào)用 useState 時，React 會為你提供該次渲染 的一張 state 快照。

    更新state對象時要傳遞一個新的值，即使時一個json對象。

    • 你可以使用這樣的 {...obj, something: 'newValue'} 對象展開語法來創(chuàng)建對象的拷貝。

    更新state中的數(shù)組：

    	推薦使用（會返回一個新數(shù)組）
    添加元素	concat，[…arr]
    刪除元素	filter，slice
    替換元素	map
    排序	先將數(shù)組復(fù)制一份兒

    可以使用 Immer 來保持代碼簡潔。

    相同UI樹上的元素的State將會被保留，位置不同的組件會使state重置

    • 你可以通過為一個子樹指定一個不同的 key 來重置它的 state。

  • props對象

    在標(biāo)簽上添加屬性，即可給組件添加prop屬性。在子組件中可以通過props讀取到對應(yīng)的屬性，解構(gòu)賦值時可以給一個默認(rèn)值

    function Avatar({ person, size = 100 }) {
      // ...
    }
    

    組件間共享狀態(tài)：可以通過狀態(tài)提升的方式，讓后再通過props傳遞給子組件。

    通過context上下文傳遞參數(shù)

    1. 創(chuàng)建context

       import { createContext } from 'react';
       export const LevelContext = createContext(1);
       

    2. 使用context

       {/* 組件會使用 UI 樹中在它上層最近的那個 <LevelContext.Provider> 傳遞過來的值。 */}
       import { LevelContext } from './LevelContext.js';
       const level = useContext(LevelContext);
       

    3. 提供context

       {/* 在父組件中設(shè)定對應(yīng)的值 */}
       <section className="section">
           <LevelContext.Provider value={level}>
         		{children}
           </LevelContext.Provider>
       </section>
       

  • ref對象

• React的交互：

  • 給元素的事件傳遞一個函數(shù)，而調(diào)用一個函數(shù)。

    <button onClick={handleClick}> {/* 正確 */}
    <button onClick={handleClick()}>{/* 錯誤 */}
    

• 在 React 中，useState 以及任何其他以“use”開頭的函數(shù)都被稱為 Hook。

  • 使用useImmerReducer可以將通知同一個state的方法，組織到一起。提高代碼的可讀性。文章來源地址http://www.zghlxwxcb.cn/news/detail-662108.html

    • 把useState轉(zhuǎn)化為useReducer：
      1. 通過事件處理函數(shù) dispatch actions；
      2. 編寫一個 reducer 函數(shù)，它接受傳入的 state 和一個 action，并返回一個新的 state；
      3. 使用 useReducer 替換 useState；

    import { useImmerReducer } from 'use-immer';
    import AddTask from './AddTask.js';
    import TaskList from './TaskList.js';
    
    function tasksReducer(draft, action) {
      switch (action.type) {
        case 'changed': {
          const index = draft.findIndex((t) => t.id === action.task.id);
          draft[index] = action.task;
          break;
        }
        case 'deleted': {
          return draft.filter((t) => t.id !== action.id);
        }
        default: {
          throw Error('未知 action：' + action.type);
        }
      }
    }
    
    export default function TaskApp() {
      const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);
      function handleChangeTask(task) {
        dispatch({
          type: 'changed',
          task: task,
        });
      }
      function handleDeleteTask(taskId) {
        dispatch({
          type: 'deleted',
          id: taskId,
        });
      }
      return (
        <>
          <h1>布拉格的行程安排</h1>
          <AddTask onAddTask={handleAddTask} />
          <TaskList
            tasks={tasks}
            onChangeTask={handleChangeTask}
            onDeleteTask={handleDeleteTask}
          />
        </>
      );
    }
    let nextId = 3;
    const initialTasks = [
      {id: 0, text: '參觀卡夫卡博物館', done: true},
      {id: 1, text: '看木偶戲', done: false},
      {id: 2, text: '打卡列儂墻', done: false},
    ];
    
    

到了這里，關(guān)于前端框架學(xué)習(xí)-React（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！