关于react.js:React高级指引上

1次阅读

共计 3217 个字符，预计需要花费 9 分钟才能阅读完成。

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

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

import()
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”的错误信息，就像服务端框架常常解决解体一样。你也能够将独自的部件包装在谬误边界以爱护利用其余局部不解体。

无需为每层组件手动增加 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 不会被传递

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>
  )
}

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

正文完