Mr笔记

Appearance

S13-08 React-API ​

[TOC]

React ​

组件实例app ​

jsx
class App extends React.Component {
    constructor() {
+    	this.state = {
            xxx: 'yyy'
        }
    }
    hdlFn() {
+        this.setState({
            xxx: 'zzz'
        })
    }
}
const app = new App()

app.state ​

app.setState() ​

基类组件 ​

Component ​

PureComponent ​

react内置组件 ​

Fragment ​

StrictMode ​

高阶组件 ​

forwardRef ​

memo ​

ReactDOM ​

根节点root ​

jsx
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App/>)
root.unmount()

root.render() ​

语法：

root.render(reactNode)：返回：undefined，将一段 JSX（“React 节点”）在 React 的根节点中渲染为 DOM 节点并显示

  • 参数：
  • reactNode：``，要显示的React节点。可以是：组件、createElement元素、字符串、数字、null、undefined
  • 返回值： undefined

注意：

  • 首次调用 root.render 时，React 会先清空根节点中所有已经存在的 HTML，然后才会渲染 React 组件。
  • 如果你的根节点包含了由 React 在构建期间通过服务端渲染生成的 HTML 内容，请使用hydrateRoot()替代这个方法，这样才能把事件处理程序和现有的 HTML 绑定。
  • 如果你在一个根节点上多次调用了 render，React 仍然会更新 DOM，这样才能保证显示的内容是最新的。React 将会筛选出可复用的部分和需要更新的部分，对于需要更新的部分，是 React 通过与之前渲染的树进行 “比较” 得到的。在同一个根节点上再次调用 render 就和在根节点上调用 set 函数 类似：React 会避免没必要的 DOM 更新。

root.unmount() ​

工具类 ​

createElement ​

cloneElement ​

createContext ​

Children ​

Children.map ​
Children.forEach ​
Children.count ​
Children.toArray ​
Children.only ​

createFactory ​

createRef ​

isValidElement ​

Hooks ​

useState ​

useReducer ​

userImperativeHandle ​

useMemo ​

useRef ​

useEffect ​

useDebugValue ​

useTransition ​

useContext ​

useCallback ​

useLayoutEffect ​

ReactDOM ​

createRoot ​

render ​

hydrate ​

usestable_batchedUpdates ​

flushSync ​

findDOMNode ​

unmountComponentAtNode ​

createPortal ​

创建React ​

  • createRoot(domNode, options?)：返回：，
    • **参数 **
    • domNode：``，
    • options：返回：，

：``，

：返回：，