阅读react-cloud-music学习到的知识点

KrisGuoQin commented 4 years ago

项目地址React 16.8打造精美音乐WebApp

KrisGuoQin commented 4 years ago

React.memo

文档地址

React.memo是一个高阶组件，适用于函数组件，不适用于class组件
如果相同的props渲染结果相同，可以使用React.memo进行包装，可以提高组件性能。如果前后props相同，它会跳过渲染组件的操作并直接复用上一次的渲染结果
默认情况下只会对复杂对象做浅层对比，如果想自定义控制比较过程，可以将自定义的比较函数作为第二个参数传入，参数为prevProps, nextProps

KrisGuoQin commented 4 years ago

Styled Component

文档地址

基于模版字符串的标签函数功能

支持根据props动态控制样式


import React from 'react'
import styled from 'styled-components'

const padding = '3em'

const Section = styled.section color: white; padding: ${padding}; background: ${props => props.background};

render(

✨ Magic

)

KrisGuoQin commented 4 years ago

React.forwardRef

文档地址

当我们在组件内部使用React.createRef()生成Ref引用，并将它附加到Dom元素上时候，ref就指向该Dom元素
当我们引用组件并附加ref引用时候，ref值指向组件实例，如果我们想达到ref直接指向组件里面的Dom元素时候，就需要使用forwardRef转发引用

在高阶组件中需要转发Refs特别有用。因为ref不会向下传递，在经过高阶组件包装后，ref并不是指向我们的组件，而是指向包装组件，可以使用forwardRef转发ref到我们的组件

const FancyButton = React.createRef((props, ref) => (
<button ref={ref}>
{props.children}
</button>
))
const ref = React.createRef()
<FancyButton ref={ref}>click me</FancyButton>

其中ref指向button元素，而不是FancyButton的实例

// 高阶组件
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
  console.log('old props:', prevProps);
  console.log('new props:', this.props);
}

render() {
  const {forwardedRef, ...rest} = this.props;

  // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
  return <Component ref={forwardedRef} {...rest} />;
}
}

// 注意 React.forwardRef 回调的第二个参数 “ref”。
// 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
// 然后它就可以被挂载到被 LogProps 包裹的子组件上。
return React.forwardRef((props, ref) => {
return <LogProps {...props} forwardedRef={ref} />;
});
}

KrisGuoQin commented 4 years ago

useImperativeHandle

文档地址

当我们使用ref附加到组件上，ref值是组件实例，可以访问实例属性和方法，如果我们需要自定义暴露给父组件的实例值时候，就需要使用useImperativeHandle

useImperativeHandle常常和forwardRef一起使用

function FancyButton (props, ref) {
const inputRef = useRef()
useImperativeHandle(ref, () => ({
    focus: () => {
        inputRef.current.focus()
    }
}))
return <input ref={inputRef} />
}
FancyButton = forwardRef(FancyButton)
FancyButton.focus()

KrisGuoQin commented 4 years ago

lazy suspense

文档地址

用于代码分割和懒加载
lazy用于定义代码分割点，仅在代码第一次用到时候加载，如果没有用到，就不会加载，可以减少首次渲染的代码体积，用法是传入一个函数，动态调用import()，返回一个promise，该promise resolve一个export default 的React组件。
suspense用于包裹由lazy导入的组件，suspense可以包裹多个懒加载组件，suspense接受fallback的props，用于加载组件过程中显示正在加载真的状态
```
const FancyButton = React.lazy(() => import('./FancyButton'))
```

function MyComponent () { return ( <Suspense fallback={

loading

}>

    </Suspense>
)

}

KrisGuoQin / Blog