小编Muh*_*ooq的帖子

我试图找出NextJs和Create React App之间的区别。我知道在使用ReactJs开发我们的前端应用程序时，两者都可以让我们的生活更轻松。

在谷歌上浏览了一些文章后，我发现主要的区别是

NextJs 提供服务器端渲染（SSR），而 Create React App 提供客户端渲染（CSR），SSR 提高应用程序加载的性能。

但是从开发的角度来看其他参数呢

使用 NextJS 或 CRA 开发的 Web App 的可维护性和可扩展性？

打字稿和 React Hooks/Redux 支持?

或者，如果我做错了比较，您甚至可以指导我？

我有一个已弃用依赖项的 React 应用程序。为了使其工作，我必须将依赖项更新为较新（但稳定）的版本。

根据这个 stakoverflow线程，要将 package.json 中的依赖项更新到最新版本，npm-check-updates是 npm 的最佳选择。但是，我使用纱线进行包管理。纱线中是否有相当于 npm-check-updates 的东西。因此，我使用单个包管理器来管理我的依赖项。

我已经浏览了 ReactJs官方文档中Pure 和 Impure Javascript 函数的定义。

纯函数是不尝试改变其输入的函数，并且对于相同的输入总是返回相同的结果。

例子

function sum(a, b) {
  return a + b;
}

不纯函数是一种改变自己输入的函数。

例子

function withdraw(account, amount) {
  account.total -= amount;
}

现在，有人能告诉我，我怎么能错误地使React/Redux中的函数变得不纯，在那里需要纯函数？

我正在尝试删除未使用的导入和声明，如在这个 SO 线程中回答的Angular。我正在尝试使用eslint-plugin-react实现目标，但没有找到任何选项来使用单个命令从整个项目中删除未使用的导入和声明。

这是我的 .eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "unused-imports"
    ],
    "rules": {
        "indent": [
            "warn",
            "tab"
        ],
        "linebreak-style": [
            "warn",
            "windows"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "warn",
            "always"
        ],
        "@typescript-eslint/no-unused-vars": "on",
        "unused-imports/no-unused-imports-ts": "on"
    }
}

或者有没有办法在 VS Code 中使用 ESLint 或 Typescript Hero 扩展来做同样的事情？

下面是 Next JS 中我的包大小的屏幕截图。我想指出的是react-color下部件node_modules。我以这种方式导入它们：

import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';

但是你看它包括了所有我不使用的东西，例如photoshop.js，sketch.js等等。

我如何才能不将我不使用的东西与摇树捆绑在一起？

我确实注意到import { debounce } from 'lodash';导入了所有lodash但import debounce from 'lodash/debounce';将包大小减少了 200kB。

我正在尝试配置我的新 react-redux 应用程序以使用 React-Redux 的新功能。在官方文件说：

React Redux 现在提供了一组钩子 API 作为现有 connect() 高阶组件的替代方案。

我一直在寻找一些与 Hooks API 相关的帮助文章和一些真实的例子，但所有的 react-redux 应用程序都在使用连接功能。官方文档还显示了非常基本的示例。

我想使用 useSelector（由 Hooks API 提供）更改我的应用程序中的连接功能。

这是我的应用程序中的示例代码片段。

//MessagesListContainer
export default connect(
  // mapStateToProps
  (state:State) => ({
    activeUser: getActiveUser(state),   
    messages: getMessagesList(state),   
  })
)(MessagesList)

//Selectors
export const getActiveUser = (state: State) => state.activeUser;
export const getMessagesList = (state : State) => (
  Object.keys(state.messages).map((key : any)=> state.messages[key])
)

export interface IMessagesListProps {
  activeUser?: User;
  messages?: Message[];
}
/**
 *  Messages List
 */
export default …

最近我开始学习React Storybook。在下面的示例中，当我不写入时{}，Template.bind({})故事书将运行得很好，不会出现任何错误。但我发现很多人在制作故事时都会使用{}in Template.bind({})。

问： Storybook 制作故事时需要有{}内部吗？Template.bind({})

import React from 'react'
import { MyButton } from './MyButton'

export default {
    title :  'MyButton',
    component : MyButton
};

const Template = (args) => <MyButton {...args}/>

export const Primary = Template.bind()
Primary.args = {
    variant: 'primary',
    label: 'button'
}

我有一个网格容器和按钮，因为它是子容器（网格项）。我想将网格项目垂直居中对齐。

这是我的要求的直观表示

这是标记

<Box height="10vh" mr={4}>
  <Grid container justify="flex-end" spacing={2}>
    <Button variant="contained" color="default" type="reset">
      Reset
    </Button>
    <Button
      type="submit"
      variant="contained"
      color="primary"
      onClick={() => handleSubmit()}
    >
      Search
    </Button>
  </Grid>
</Box>;

谁能告诉我一个基于material-ui grid API的解决方案？

我要开始一个反应项目。我想澄清一下在 Reactstrap 上选择 Material UI。正如在另一个Bootstrap 与 React Material UI 的比较中提到的，Material UI 比 Bootstrap 更好？. 但是在浏览了 Material UI 和 Reactstrap 的优缺点后，我对 Reactstrap 有点困惑，如下图所示。或者我应该在同一个项目中根据要求同时使用它们吗？

我想使用现成的 UI 组件，如可折叠的侧边菜单、带分页的表格、自动完成选择等。

我正在使用 React + Material Table。

我的问题

• 有没有办法根据页面上的可用空间动态设置pageSize？
• 如果没有 API 可以这样做 - 如何从组件设计的角度更好地解决这个问题？

我想要达到什么目标？

材料表中显示的行数应取决于屏幕尺寸。根据您的屏幕尺寸，页面看起来不会相似（例如，在笔记本电脑上它可能看起来不错，但在 25 英寸显示器上会有很多空间可以由行填充）。

我已经做了什么？

• 我搜索了官方文档，但找不到解决方案。
• 我也在寻找开发人员帖子和其他 SO 主题 - 仍然没有结果。

当然，可以构建一个脚本，根据容器大小和行大小进行一些简单的计算以填充尽可能多的行，但我想避免这种解决方案，并尽可能使用开箱即用的东西。