API

ReactDOM

render

将虚拟 DOM 渲染为真实的 DOM

ReactDOM.render();

组件

函数组件

function Home() {
  return <div></div>;
}

function Home(props) {
  return <div></div>;
}

// 函数状态组件为 useState

类组件

export class Home extends React.Component {
  render() {
    return <div>hello word</div>;
  }
}

export class Home extends React.Component {
  constructor() {
    this.state = {};
  }

  render() {
    return <div>hello word</div>;
  }
}

代码分割和异步组件

由打包工具自动完成代码分割，例如 webpack,rollup，对于 babel，则需要额外使用插件，例如 babel-plugin-syntax-dynamic-import

React.lazy 和 Suspense

React.lazy 只支持默认导出

const c = React.lazy(() => import(xxx));

// 然后使用 Suspense 包裹
<Suspense fallback={<div>loading</div>}>
  <Home name="keven" />
</Suspense>;

Context

对于需要逐层传递的值，例如语言、颜色、主题等等，React 提供类似组件共享的方式

// 对于类组件
export const ThemeContext = React.createContext("dark");
ThemeContext.displayName = "xx"; // react dev tools 使用该 name 来确定 context 显示内容

<ThemeContext.Provider value="light">
  <Home />
</ThemeContext.Provider>;

export default class Home extends React.Component {
  static contextType = ThemeContext;
  // 后续的方法内可以通过 this.context 来访问
}

// 函数组件

export default function Home() {
  return <ThemeContext.Consumer>{(value) => value}</ThemeContext.Consumer>;
}

错误边界

捕获错误，无法捕获如下错误

1. 事件处理的错误
2. 异步代码
3. 服务端渲染
4. 它自身的报错，而非子组件的报错

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Ref

可以访问本组件、其他组件的元素，直接操作 DOM

// 父组件
const ref = React.createRef(); // 在子组件赋值后，可以父组件内通过 ref.current 操作DOM

<Child ref={ref}></Child>;

// 子组件
const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>点击我</div>; // 此时 ref的current为div，可以直接操作DOM
});

Fragments 和 <></>

节点不会渲染，类似于 vue 的 template

JSX

function Home(props) {}

1. 对于 react jsx 标签，不能在运行时选择类型，但是可以预先赋值

<home[attr]> // 这是要报错的</home[attr]>

const Attr = home[attr];

<attr> // 这是可以的</attr>

1. props 可以对象解构
2. props 未指定值时，传值为 true
3. props.children 为传递的子元素

<div> {props.children} </div>

1. false, null, undefined, and true 是合法的子元素。但它们并不会被渲染

Props

可分为函数组件 props 和 class 组件 props

PropTypes

使用 PropTypes 对 props 检查

Greeting.propTypes = {
  name: PropTypes.string,
};

Portals

提供了将子组件渲染至父组件之外的地方，譬如悬浮框，对话卡等等

export const Home = () => {
  return ReactDOM.createPortal(
    Frame(), // 接收React Component
    document.getElementById('root2')
  )
}


export function Frame() {
  return (
    <div id="frame">
      hello frame
    </div>
  )
}
`