小编Alf*_*x92的帖子

React 16.3.0已经发布,Context API不再是实验性功能.Dan Abramov(Redux的创建者)在这里写了一篇很好的评论,但是当Context仍然是一个实验性功能已经2年了.

我的问题是,在您的观点/经验中何时应该使用React Context而不是React Redux,反之亦然？

当我更新我的网站时,运行npm run build并将新文件上传到服务器我仍在查看我的网站的旧版本.我的项目的回购是 https://github.com/Alfrex92/serverlessapps

没有React,我可以看到我的网站的新版本缓存破坏.我这样做:

上一个文件

<link rel="stylesheet" href="/css/styles.css">

新文件

<link rel="stylesheet" href="/css/styles.css?abcde">

我怎么能做这样的事情或用create react app实现缓存清除？

在创建的github中有许多线程对此做出反应,但没有人有正确/简单的答案.

知道如何使用 Yup（不带 Formik）进行 React 输入验证吗？

我在网上找不到任何好的例子。谢谢

当react-query中突变失败时，如何重试？\n如果有错误，我想重试突变3次。

我读过坦纳提到的这篇文章you\xe2\x80\x99ll have to build your own promise retry wrapper.，但是，我该怎么做呢？

我的职能是：

const [accessSelectPage, accessSelectPageInfo] = useMutation(\n    () =>\n      axios.post(\n        POST_ACCESS_SELECT_PAGE_EP(token ?? \'\'),\n        {},\n        {\n          headers: { \'X-Campaign-ID\': campaignID }\n        }\n      ),\n    {\n      onSuccess: (responseOnSuccess) => {\n        console.log(\'accessSelectPage\', responseOnSuccess)\n      },\n      onError: (error) => {\n        console.log(\'accessSelectPage error\', error)\n      }\n    }\n  )\n

注意：是的，我知道 v3 有一个“重试”选项，但我正在使用 v2，并且由于多种原因更新反应查询不可行。

我正在使用Intersection Observer API，我想知道：

如何消除或限制Intersection Observer API？

如果我想提高性能，是否建议使用防抖或油门功能？

我有个问题：

将 HOC 与 React Hooks 一起使用仍然有意义吗？

如果是，在哪些情况下使用它是个好主意？

谢谢你。

我观看了谷歌关于 SEO 的会议，他们谈论了动态和混合渲染。但是，我无法理解其中的区别，这是什么？

感谢您的时间。

React 16.3.0已发布，并且React生命周期有所变化。

反应不推荐使用componentWillMount，componentWillReceiveProps，componentWillUpdate。

在那种情况下，我应该用什么代替componentWillUpdate？例如，在下面的代码中，我该如何替换componentWillUpdate？

import React from "react";
import Modal from "./Modal";

class ModalContainer extends React.Component {
  state = {
    openModal: false
  };
  onClick = () => {
    this.setState({
      openModal: !this.state.openModal
    });
  };

  escapeKey = e => {
    if (e.key === "Escape" && this.state.openModal === true) {
      this.setState({
        openModal: !this.state.openModal
      });
    }
  };
  componentDidMount() {
    document.body.classList.add("no-scroll");
    this.componentWillUpdate(this.state, this.state);
  }
  componentWillUpdate(p, c) {
    if (c.openModal) {
      window.addEventListener("keyup", this.escapeKey);
    } else { …

我正在尝试使用 Typescript 和 useCallback，但出现此错误

Expected 0 arguments, but got 1

这是我的代码

const searchFriends = useCallback(() => (filterValue: string): void => {
    if (dataState.length <= INITIAL_FRIENDS_API_REQUEST) fetchAllFriends()
    const filterValueInsensitive = filterValue.toLowerCase()
    const filtered = dataState.filter((friend: Friends) => {
      return friend.displayName?.toLowerCase().includes(filterValueInsensitive)
    }) 
    setFriendsDisplayState(filtered)
  }, [dataState,fetchAllFriends]) 

  const handleChangeSearchInput = (
    e: React.ChangeEvent<HTMLInputElement>
  ): void => searchFriends(e.currentTarget.value) // ERROR here "Expected 0 arguments, but got 1"

知道如何修复它吗？

我正在尝试将 React Typescript 与复合组件一起使用，但遇到此错误：

JSX element type 'Nav.Content' does not have any construct or call signatures.ts(2604)

这是一个沙箱：https://codesandbox.io/s/compound-components-typescript-fjilh ?file=/src/App.tsx

知道如何修复它吗？

这就是我的代码的样子：

Nav.tsx

interface ContentProps {
  children: ReactNode;
}
const Content: React.FC<ContentProps> = (props: ContentProps) => (
  <div>{props.children}</div>
);
interface ContentComposition {
  Content?: React.FC<ContentProps>;
}
interface Props {
  children: ReactNode;
}
const Nav: React.FC<Props> & ContentComposition = (props: Props) => (
  <div>{props.children}</div>
);

Nav.Content = Content;

export default Nav;

App.tsx

export default function App() {
  return (
    <div className="App">
      <Nav>
        <Nav.MainContent> …