タグ付けされた質問 「react-context」

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 2年前休業。 この質問を改善する React 16.3.0がリリースされ、Context APIは実験的な機能ではなくなりました。ダン・アブラモフ（Reduxのの作成者は）良いコメントを書き込みました。ここではこのことについて、コンテキストが、まだ実験的な機能だった2年でした。 私の質問は、あなたの意見/経験では、React ReduxよりもReact Contextをいつ使用する必要があるか、またはその逆ですか？

187 javascript  reactjs  redux  react-redux  react-context 

私は以下のような文脈で言語設定を持っています class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider; 私のアプリケーションコードは次のようになります <LanguageProvider> <App> <MyPage /> </App> </LanguageProvider> 私のページには言語を切り替えるコンポーネントがあります <MyPage> <LanguageSwitcher/> </MyPage> LanguageSwitcher このMyPage場合、以下のようにコンテキストを更新して言語を「jp」に変更する必要があります class LanguageSwitcher extends Component { static contextTypes …

108 javascript  reactjs  react-context 

Reduxの代わりに新しいReactContext APIを使用して新しいアプリを開発しています。以前は、Reduxたとえばユーザーのリストを取得する必要があるときにcomponentDidMount、アクションを呼び出すだけでしたが、React Contextを使用すると、アクションは内部に存在します。レンダー関数内にあるコンシューマー。つまり、レンダー関数が呼び出されるたびに、アクションが呼び出されてユーザーリストが取得されますが、不必要なリクエストが多数行われるため、これは適切ではありません。 では、componentDidMountレンダーで呼び出す代わりに、アクションを1回だけ呼び出すにはどうすればよいですか？ 例として、次のコードを見てください。 次のProvidersように、すべてを1つのコンポーネントにラップしていると仮定します。 import React from 'react'; import UserProvider from './UserProvider'; import PostProvider from './PostProvider'; export default class Provider extends React.Component { render(){ return( <UserProvider> <PostProvider> {this.props.children} </PostProvider> </UserProvider> ) } } 次に、次のように、すべてのアプリをラップするこのプロバイダーコンポーネントを配置します。 import React from 'react'; import Provider from './providers/Provider'; import { Router } from './Router'; …

93 reactjs  react-context 

数週間前にリリースされたReact Routerの新しいuseHistoryフックを使用しています。私のReact-routerのバージョンは5.1.2です。My Reactのバージョンは16.10.1です。私のコードは一番下にあります。 しかし、react-routerから新しいuseHistoryをインポートすると、次のエラーが発生します。 Uncaught TypeError: Cannot read property 'history' of undefined これは、React-routerのこの行によって引き起こされます function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; …

18 reactjs  react-router  react-hooks  react-router-dom  react-context