前端框架学习-React（一）

React 应用程序是由组件组成的。

• react 程序是用的jsx语法，使用这种语法的代码需要由babel进行解析，解析成js代码。

  jsx语法：

  1. 只能返回一个根元素

  2. 所有的标签都必须闭合（自闭和或使用一对标签的方式闭合）

  3. 使用驼峰式命名法给大部分属性命名如：className

  4. 大写字母开头的标签一般都是组件

  5. jsx标签的属性，使用引号传递字符串，使用一组{和}传递js变量，且大括号中可以写js的表达式，也可以传递使用个另外一对额外的大括号包裹对象。

  6. 标签中可以使用三目运算符

     在 JSX 中，{cond ? <A /> : <B />} 表示 “当 cond 为真值时, 渲染 <A />，否则 <B />”

     在 JSX 中，{cond && <A />} 表示 “当 cond 为真值时, 渲染 <A />，否则不进行渲染”。

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

  7. 渲染列表：使用map()方法生成一组相似组件，使用filter()方法来筛选数组

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

• 组件引入语法用到了ES6的模块化编程语法

  1. 解构赋值语法：可以将数组中的值或对象的属性取出，赋值给其他变量。

  2. 展开运算符：

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

• React 三大元素：

  • State对象（要将state视为只读的）

    在数据发生改变之后页面上的内容才会重新渲染、

    • 设置 state 不会更改现有渲染中的变量，会请求一次新的渲染。
    • React 将 state 存储在组件之外，就像在架子上一样。
    • 当你调用 useState 时，React 会为你提供该次渲染 的一张 state 快照。

    更新state对象时要传递一个新的值，即使时一个json对象。

    • 你可以使用这样的 {...obj, something: 'newValue'} 对象展开语法来创建对象的拷贝。

    更新state中的数组：

    	推荐使用（会返回一个新数组）
    添加元素	concat，[…arr]
    删除元素	filter，slice
    替换元素	map
    排序	先将数组复制一份儿

    可以使用 Immer 来保持代码简洁。

    相同UI树上的元素的State将会被保留，位置不同的组件会使state重置

    • 你可以通过为一个子树指定一个不同的 key 来重置它的 state。

  • props对象

    在标签上添加属性，即可给组件添加prop属性。在子组件中可以通过props读取到对应的属性，解构赋值时可以给一个默认值

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

    组件间共享状态：可以通过状态提升的方式，让后再通过props传递给子组件。

    通过context上下文传递参数

    1. 创建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

       {/* 在父组件中设定对应的值 */}
       <section className="section"><LevelContext.Provider value={level}>{children}</LevelContext.Provider>
       </section>
       

  • ref对象

• React的交互：

  • 给元素的事件传递一个函数，而调用一个函数。

    <button onClick={handleClick}> {/* 正确 */}
    <button onClick={handleClick()}>{/* 错误 */}
    

• 在 React 中，useState 以及任何其他以“use”开头的函数都被称为 Hook。

  • 使用useImmerReducer可以将通知同一个state的方法，组织到一起。提高代码的可读性。

    • 把useState转化为useReducer：
      1. 通过事件处理函数 dispatch actions；
      2. 编写一个 reducer 函数，它接受传入的 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} /><TaskListtasks={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},
    ];