当前位置：首页 > news >正文

React 学习笔记 2022-08

news 来源：原创 2024/7/3 0:03:05

这里写目录标题

- - portal
  - CSS module
  - fragment ===> <></>
  - 移动端适配
  - 字体图标库 FortAweSome
  - Context
  - - Class.contextType
    - context组件传递函数式组件使用
  - useEffect 副作用

函数是组件返回 JSX 通过 babel 解析HTML

JSX 中的 DOM 通过 on* 绑定的事件函数默认传递事件原型 event 所有的事件信息都包涵在事件原型中。

const [count,setCount] = sueState(); 更新对象必须进行对象的copy
- setCount 更新数据的时候。如果是应用类型的数据进行更新必须对这个应用类型的数据进行 copy 全部更新更新的是异步的
form 表单通过。value 进行数据绑定。
- 通过e.target.value 更新 State
const h1Ref = useRef(); 获取DOM 最好不要进行DOM操作
- 返回 {current:undefined}
setCount(prebState => newState) setState 传递一个 callbak function 参数为最新的 State 数据。
兄弟组件之间修改 State 把 State 存储到父级组件中存储通过传递 callback function 的方式更新 State。
props.children 获取到自定义组件的子元素。类似于 vue 的 slot 插槽

portal

index.html 中的 root 同级添加 id 为 dortal 的标签
通过下面的代码把指定的组件传递进根组件

Example:用来自定义蒙板的时候提升蒙板组件的层级。

const portalDom = document.getElementById('dortal');

const BackDrop = (prop)=>{
        
        return ReactDom.createPortal(<div>          {props.children} <div>,portalDom);
}

CSS module

指定使用某个模块的类名样式；
CSS module 的使用：
1.创建一个 xxxx.module.css
2.在组件中引入 css
import clesses from './xxx.module.css';
3.通过clesses 来设置类名
classNmae={clesses.p1}

react 会自动生成类名不会造成类名重复导致样式重叠。使用同一 css module react 生成的类名是相同的。

fragment ===> <></>

单独的父容器只会返回子元素不会产生任何东西。

移动端适配

document.documenElement.style.fonySize = 100/750 + ‘vw’

设置元素的宽高使用 rem ；
width：‘750rem’；就是横向 100%；

字体图标库 FortAweSome

下载引入绑定 icons值

Context

从一个在组件树中嵌套很深的组件中更新 context 是很有必要的。在这种场景下，你可以通过 context 传递一个函数，使得 consumers 组件更新 context：

1.确保传递给 createContext 的默认值数据结构是调用的组件（consumers）所能匹配的！
export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, });
2. 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
无论多深，任何组件都能读取这个值。
在这个例子中，我们将 “dark” 作为当前的值传递下去。

  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>

3.API

    React.createContext
    Context.Provider
    Class.contextType
    Context.Consumer
    Context.displayName

Class.contextType

类组件中通过 class.contextType 的方式绑定 context；使用的时候直接使用 this.context 获取 context 的数据

context组件传递函数式组件使用

<ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>

useEffect 副作用

前言：
函数组件：
const [count ,setCount] = useState(‘’);
setCount（）执行底层调用 ReactDom中的dispathSetDate（）

先判断当前组件的状态
如果是渲染中阶段不会检查Stete值是否相同
如果是渲染完成阶段会检查State值是否相同
如果值不同，对当前组件重新渲染
如果值相同，不会对当前组件重新渲染
如果值相同，某些情况下 react 会继续进行这个组件的渲染，这次渲染不会触发子组件渲染，且不会产生任何实际效果。

useEffect(()=>{ return ()=>{}; },[]);

回调函数会在组件渲染完毕的时候执行；
第二个参数传递一个数组（依赖项）当依赖项变化的时候才会执行副作用；
- 通常把 effect 中的所有局部变量全部设置成依赖项。确保这些值发生变化时，会出发effect
- setState 可以不设置成依赖项。
如果依赖项为空数组 effect 只会在初始化的时候执行。
回调函数返回一个函数。这个函数会在下一次 effect 回调函数执行之前执行。
- example：在effect 的回调函数中添加定时器，在回调函数中的返回的函数中清除定时器，实现一个 effect 的防抖。