React и ReactDOM - это две разные библиотеки, которые используются в React-приложениях. Но обычно импортируются обе библиотеки, чтобы использовать их функциональности вместе.
React - это библиотека JavaScript для создания пользовательских интерфейсов.
const React = {
Children: {
map: function () {
/* ... */
},
forEach: function () {
/* ... */
},
count: function () {
/* ... */
},
toArray: function () {
/* ... */
},
only: function () {
/* ... */
},
},
Component: function Component(props, context, updater) {
/* ... */
},
Fragment: Symbol("react.fragment"),
Profiler: Symbol("react.profiler"),
PureComponent: function PureComponent(props, context, updater) {
/* ... */
},
StrictMode: Symbol("react.strict_mode"),
Suspense: Symbol("react.suspense"),
cloneElement: function cloneElementWithValidation(element, props, children) {
/* ... */
},
createContext: function createContext(defaultValue, calculateChangedBits) {
/* ... */
},
createElement: function createElementWithValidation(type, props, children) {
/* ... */
},
createFactory: function createFactoryWithValidation(type) {
/* ... */
},
createRef: function createRef() {
/* ... */
},
forwardRef: function forwardRef(render) {
/* ... */
},
isValidElement: function isValidElement(object) {
/* ... */
},
lazy: function lazy(ctor) {
/* ... */
},
memo: function memo(type, compare) {
/* ... */
},
useCallback: function useCallback(callback, deps) {
/* ... */
},
useContext: function useContext(context, unstable_observedBits) {
/* ... */
},
useDebugValue: function useDebugValue(value, formatterFn) {
/* ... */
},
useEffect: function useEffect(create, deps) {
/* ... */
},
useImperativeHandle: function useImperativeHandle(ref, create, deps) {
/* ... */
},
useLayoutEffect: function useLayoutEffect(create, deps) {
/* ... */
},
useMemo: function useMemo(create, deps) {
/* ... */
},
useReducer: function useReducer(reducer, initialArg, init) {
/* ... */
},
useRef: function useRef(initialValue) {
/* ... */
},
useState: function useState(initialState) {
/* ... */
},
version: "17.0.2",
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
ReactCurrentDispatcher: {
/* ... */
},
},
};ReactDOM - это библиотека, которая предоставляет интеграцию React с DOM. Она используется для рендеринга React компонентов в реальный DOM. ReactDOM содержит методы для манипулирования реальным DOM, такие как ReactDOM.render(), который используется для рендеринга React-компонентов в DOM.
const ReactDOM = {
createPortal: function createPortal(children, container) {
/* ... */
},
findDOMNode: function findDOMNode(componentOrElement) {
/* ... */
},
flushSync: function flushSync(fn, a) {
/* ... */
},
hydrate: function hydrate(element, container, callback) {
/* ... */
},
render: function render(element, container, callback) {
/* ... */
},
unmountComponentAtNode: function unmountComponentAtNode(container) {
/* ... */
},
unstable_batchedUpdates: function batchedUpdates(fn, a) {
/* ... */
},
unstable_createPortal: function unstable_createPortal(children, container) {
/* ... */
},
unstable_renderSubtreeIntoContainer: function renderSubtreeIntoContainer(
parentComponent,
element,
container,
callback,
) {
/* ... */
},
version: "17.0.2",
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
Events: [], // Пример внутренних данных
},
};По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS) .
Устранение ошибки: “ReactDOM.render больше не поддерживается в React 18. Вместо этого используйте createRoot”