我是一名Vue.js开发者,最近开始学习React。
我有一个组件:PageContent.jsx,希望能够在render函数(JSX)中使用它而不必不断地导入它。
在Vue中,我们可以使用以下方法将组件全局化:
Vue.component(componentName, componentObject)
在React中是否有类似的东西?
我是一名Vue.js开发者,最近开始学习React。
我有一个组件:PageContent.jsx,希望能够在render函数(JSX)中使用它而不必不断地导入它。
在Vue中,我们可以使用以下方法将组件全局化:
Vue.component(componentName, componentObject)
在React中是否有类似的东西?
嗯,React中没有任何形式的“全局”组件。每个组件都必须被导入或作为prop传递。但如果你想避免在每个文件中添加import,有几种选择:
1)创建一个Higher Order Component,它可以渲染PageContent
和包装的组件。
import PageContent from './PageContent';
const withPageContent = WrappedComponent => {
return class extends React.Component {
render () {
return (
<PageContent>
<WrappedComponent />
</PageContent>
)
}
}
};
export default withPageContent;
// Usage
import withPageContent from './withPageContent';
class MyComponent extends React.Component {
render () {
return (
<div>
I'm wrapped in PageContent!
</div>
)
}
}
export default withPageContent(MyComponent);
2) 将PageContent
作为一个prop传递给组件:
import PageContent from './PageContent';
export default class App extends React.Component {
render() {
return (
<React.Fragment>
<Child1 content={PageContent} />
<Child2 content={PageContent} />
</React.Fragment>
)
}
}
// Usage
export default class Child1 extends React.Component {
render () {
const PageContent = this.props.content;
return (
<PageContent>
I'm wrapped in PageContent!
</PageContent>
)
}
}
export default class Child2 extends React.Component {
render () {
const PageContent = this.props.content;
return (
<PageContent>
I'm wrapped in PageContent!
</PageContent>
)
}
}
useContext
hook的示例,但hooks并不是必须使用的。结构是标准的create-react-app
结构。function Header() {
return (
<h1>
I am a global component
</h1>
);
}
export default Header;
import React from 'react';
const MyContext = React.createContext(null);
export default MyContext;
import Header from './deep/Header';
const contextValue = {
Header,
};
export default contextValue;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import MyContext from './global-components-context';
import contextValue from './global-component';
ReactDOM.render(
<MyContext.Provider value={contextValue}>
<App />
</MyContext.Provider>,
document.getElementById('root')
);
在未导入组件的情况下使用该组件 - src / App.js:
import { useContext } from 'react';
import globalComponent from './global-components-context';
function App() {
const Context = useContext(globalComponent);
return (
<div className="App">
<Context.Header />
</div>
);
}
export default App;
我认为这是React中最全局的组件。请注意,您仍然需要在想要使用全局组件的地方导入上下文。
另外还有一个声明,全局组件很难测试,通常很难理解。我相信这就是为什么React中没有标准解决方案的原因。
希望我能帮到你。
tl;dr: 在以下示例中使用Zustand全局状态管理库:
https://snack.expo.dev/3yNFvhCmI?platform=web
有两种主要的方法可以实现这个目标:
虽然 Context API 的解决方案相对简单,不需要额外的依赖,但它可能导致不必要的重新渲染,并带来一些样板代码的开销。
考虑到这些因素以及其他因素,在这种情况下选择一个专用的状态管理库可能是有益的。个人建议不要在这种情况下使用 Redux,因为它的体积庞大、复杂、需要大量样板代码,并且可能对性能产生影响。特别是对于较小的项目来说,使用 Redux 会过度设计。
两个工作示例展示了相同的用例,使用了两个React Native模态框:
(这里使用React Native只是因为我目前正在使用它;这可以很容易地重构为React)
Context
API的逐步描述“言而无信,不如行而有据。”:
1. 项目结构:
- src
- components
- global
- GlobalComponent1.js
- GlobalComponent2.js
- index.js
- contexts
- GlobalComponentsContext.js
- screens
- HomeScreen.js
- App.js
import { createContext, useState } from 'react';
export const GlobalComponentsContext = createContext();
export const GlobalComponentsProvider = ({ children }) => {
const globalState = {};
[ globalState.value1, globalState.setValue1 ] = useState(false);
[ globalState.value2, globalState.setValue2 ] = useState(false);
return (
<GlobalComponentsContext.Provider value={ globalState }>
{ children }
</GlobalComponentsContext.Provider>
);
};
import { GlobalComponentsContext } from '../../contexts/GlobalComponentsContext';
const GlobalComponent1 = () => {
// accessing the global state; drop-in replacement for useState()
const { value1, setValue1 } = useContext(GlobalComponentsContext);
[...]
};
export default GlobalComponent1;
Context.Provider
包装 App
:import { GlobalComponentsProvider } from './src/contexts/GlobalComponentsContext';
import HomeScreen from './src/screens/HomeScreen';
import GlobalComponents from './src/components/global';
export default function App() {
return (
<GlobalComponentsProvider>
<HomeScreen />
<GlobalComponents />
</GlobalComponentsProvider>
)
}
import { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { GlobalComponentsContext } from '../contexts/GlobalComponentsContext';
const HomeScreen = () => {
// Take the state variables that you need:
const { value1, setValue2 } = useContext(GlobalComponentsContext);
return (
<View>
<Text>Value1: {value1}</Text>
<Button title="setValue2" onPress={() => setValue2(true)} />
</View>
);
};
export default HomeScreen;
import { Button、 Input、 Icon } from 'utils/inputs';
- Chase DeAnda