React考点清单

为什么 JSX 中的组件名要以大写字母开头？

因为 React 要知道当前渲染的是组件还是 HTML 元素。

React 组件间有那些通信方式?

父组件向子组件通信
1、 通过 props 传递

子组件向父组件通信
1、 主动调用通过 props 传过来的方法，并将想要传递的信息，作为参数，传递到父组件的作用域中

跨层级通信
1、 使用 react 自带的 Context 进行通信，createContext 创建上下文， useContext 使用上下文。

参考下面代码：

import React, {
    createContext, useContext } from 'react';

const themes = {
   
  light: {
   
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
   
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = createContext(themes.light);

function App() {
   
  return (
    <ThemeContext.Provider value={
   themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
   
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
   
  const theme = useContext(ThemeContext);
  return (
    <button style={
   {
    background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

export default App;

2、使用 Redux 或者 Mobx 等状态管理库

3、使用订阅发布模式

React 父组件如何调用子组件中的方法？

1、如果是在方法组件中调用子组件（>= react@16.8），可以使用 useRef 和 useImperativeHandle:

const {
    forwardRef, useRef, useImperativeHandle } = React;

const Child = forwardRef((props, ref) => {
   
  useImperativeHandle(ref, () => ({
   
    getAlert() {
   
      alert("getAlert from Child");
    }
  }));
  return <h1>Hi</h1>;
});

const Parent = () => {
   
  const childRef = useRef();
  return (
    <div>
      <Child ref={
   child