无障碍辅助性能

无障碍辅助性能是使得辅助技术正确解读网页的必要条件
能够从以下几个方面思考设计：语义化的HTML、无障碍的表单、管制焦点、鼠标和指针事件、语言、文档题目、色调对比度等

代码宰割

对利用进行代码宰割可能“懒加载”以后用户所须要的内容，可能显著地进步利用性能。只管并没有缩小利用整体的代码体积，但防止加载用户永远不须要的代码，在初始加载的时候缩小所需加载的代码量。

  1. import()
  2. React.lazy

无关React.lazy: React.lazy 和 Suspense 技术还不反对服务端渲染。如果想要在应用服务端渲染的利用中应用，能够应用 Loadable Components 这个库。 React.lazy 承受一个函数，这个函数须要动静调用 import()。它必须返回一个 Promise，该 Promise 须要 resolve 一个 default export 的 React 组件。而后应在 Suspense 组件中渲染 lazy 组件，如此使得咱们能够应用在期待加载 lazy 组件时做优雅降级（如 loading 指示器等）fallback 属性承受任何在组件加载过程中你想展现的 React 元素。你能够将 Suspense 组件置于懒加载组件之上的任何地位。你甚至能够用一个 Suspense 组件包裹多个懒加载组件。

show you the code

import React , { Suspense } from 'react';const PageTitle = React.lazy(()=>import('./components/pageTitle'))const Left = <LeftIcon/>function MyComp(){  return(    <Suspense fallback={<h1>Loading</h1>}>      <PageTitle title="指标" leftItem={Left}/>    </Suspense>  )}

谬误边界

在子组件树的任何地位捕捉 JavaScript 谬误，记录这些谬误，并显示一个备用 UI ，而不是使整个组件树解体
Tips:

  • 只有class组件能力成为谬误边界组件

  • 谬误边界无奈捕捉以下场景中产生的谬误：

    1. 事件处理，若想在事件处理器外部捕捉谬误，可应用一般的 JavaScript try / catch 语句
    2. 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
    3. 服务端渲染
    4. 它本身抛出来的谬误（并非它的子组件）
  • 如果一个谬误边界无奈渲染错误信息，则谬误会冒泡至最近的下层谬误边界，这也相似于 JavaScript 中 catch {} 的工作机制。

show you the code

// 未增加谬误边界

function App(){return (    <div className="page">      <MyComp/>      <h2>失常展现的内容</h2>    </div>  );}function MyComp(){  return(    <div>{ Math.random() > 0.2 ? new Error('自定义谬误！！！') : '没有谬误'}</div>  )}

此时子组件报错，导致整个页面crash

// 增加谬误边界后的代码

function App(){return (    <div className="page">      <MyComp/>      <h2>失常展现的内容</h2>    </div>  );}function MyComp(){  return(    <MyErrorBoundary>      <div>{ Math.random() > 0.2 ? new Error('自定义谬误！！！') : '没有谬误'}</div>    </MyErrorBoundary>  )}class MyErrorBoundary extends React.Component{  constructor(props:any){    super(props)    this.state = { hasError : false}  }  static getDerivedStateFromError(){    return { hasError : true}  }  componentDidCatch(error,info){    console.error(error,info);  }  render(){    if(this.state.hasError){      return(        <h1>Oops,there's something wrong</h1>      )    }else{      return this.props.children    }  }  }

此时子组件报错，整个页面未crash

anyway，谬误边界的粒度由你来决定，能够将其包装在最顶层的路由组件并为用户展现一个 “Something went wrong” 的错误信息，就像服务端框架常常解决解体一样。你也能够将独自的部件包装在谬误边界以爱护利用其余局部不解体。

Context

无需为每层组件手动增加 props，就能在组件树间进行数据传递的办法，但如果你只是想防止层层传递一些属性，组件组合有时候是一个比 context 更好的解决方案：将组件本身作为属性传下去

动静Context的实例：

const myContext = createContext(null)function MyComp(){  const [theme,setTheme] = useState<string>('dark')  const themes = {    theme,    onThemeChange:setTheme  };  return(    <myContext.Provider value={themes}>      <ThemeInput/>    </myContext.Provider>  )}function ThemeInput(){  const themeStatus = useContext(myContext)  const {theme, onThemeChange} = themeStatus  return (    <>      <input value={theme} onChange={(val)=>onThemeChange(val.target.value)}/>      <ThemeResult/>    </>  )}function ThemeResult(){  const themeStatus = useContext(myContext)  return(    <span>the theme is {themeStatus.theme}</span>  )}

尽管这个例子间接写成非受控组件就完事，单纯是为了展现一下context的应用

高阶组件

高阶组件是参数为组件，返回值为新组件的函数。
Tips:Refs 不会被传递

Refs转发

Ref 转发是一项将 ref 主动地通过组件传递到其一子组件的技巧

传递Refs到Dom组件
Tips：第二个参数 ref 只在应用 React.forwardRef 定义组件时存在。惯例函数和 class 组件不接管 ref 参数，且 props 中也不存在 ref。

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} {...props}>    {props.children}  </button>));function MyComp(){  const ref = React.createRef();  const handleButtonClick = useCallback(()=>{    console.log('ref.current',ref.current);  },[ref])  return(    <FancyButton ref={ref} onClick={handleButtonClick}>Click me!</FancyButton>  )}

Fragments

React 中的一个常见模式是一个组件返回多个元素。Fragments 容许你将子列表分组，而无需向 DOM 增加额定节点。能够应用一种新的，且更简短的语法来申明 Fragments:<></>,但它并不反对 key 或属性。key是惟一能够传递给 Fragment 的属性