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”