React 顶层 API
2023-09-11 14:18:44 时间
概览
组件
使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护。你可以通过子类 React.Component
或 React.PureComponent
来定义 React 组件。
如果你不使用 ES6 的 class,则可以使用 create-react-class
模块来替代。请参阅不使用 ES6 以获取更多详细信息。
React 组件也可以被定义为可被包装的函数:
创建 React 元素
我们建议使用 JSX 来编写你的 UI 组件。每个 JSX 元素都是调用 React.createElement()
的语法糖。一般来说,如果你使用了 JSX,就不再需要调用以下方法。
请参阅不使用 JSX 以获取更多详细信息。
转换元素
React
提供了几个用于操作元素的 API:
Fragments
React
还提供了用于减少不必要嵌套的组件。
Refs
Suspense
Suspense 使得组件可以“等待”某些操作结束后,再进行渲染。目前,Suspense 仅支持的使用场景是:通过 React.lazy
动态加载组件。它将在未来支持其它使用场景,如数据获取等。
Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 拥有专属文档章节和单独的 API 参考文档:
react-dom
的 package 提供了可在应用顶层使用的 DOM(DOM-specific)方法,如果有需要,你可以把这些方法用于 React 模型以外的地方。不过一般情况下,大部分组件都不需要使用这个模块。
https://zh-hans.reactjs.org/docs/react-api.html
相关文章
- React系列——websocket群聊系统在react的实现
- 实现拖拽复制和可排序的react.js组件
- 一统江湖的大前端React.js-从开发者到工程师
- ahooks 最好的react hook库
- [React] Debug Custom React Hooks With useDebugValue
- [React] useImperativeHandle + forwardRef
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React] Use the new React Context API
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Render Basic SVG Components in React
- [React] Radium: Updating Button Styles via Props
- [Redux] Passing the Store Down with <Provider> from React Redux
- [React] Flushing state updates synchronously with flushSync
- [React] Scaffold a React application with pnpm and vite
- [React] Use the React Context API to Globally Manage State
- [React] Refactor a render prop component into hooks
- [Parcel] Bundle a React App with Parcel
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
- Jenkins API groovy调用实践: Jenkins Core Api & Job DSL创建项目
- linux shell脚本:通过API实现git仓库从gitee向gitlab的批量迁移(gitlab api)
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结
- React合成事件的原理是什么
- React Hooks 在使用上有哪些限制?
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.