React -- Poratal CssModule Fragment 字体库 Context Class.ContextType 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

1. index.html 中的 root 同级添加 id 为 dortal 的标签

2. 通过下面的代码把 指定的组件传递进 根组件

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 的防抖。