小编Goo*_*mja的帖子

我正在尝试访问反应路由器的历史堆栈。

这是我想做的：

我使用react.js 和react-router 创建一个板。

如果用户单击板上的列表之一，则会转到详细信息页面。

假设用户点击列表中 id 为 3 的文章，react-router 会转到 id 3 文章的详细信息页面，url 形式如下。

localhost:3000/board/3

在详细信息页面中，有一个转到列表按钮，当用户单击它时，页面将再次移动到列表页面，我将在这里使用history.back()。

到目前为止，使用react-router 就很容易做到了。

但是，用户可以访问另一个页面的详细信息页面，例如个人资料页面。

如果用户通过个人资料页面访问详细信息页面，则转到列表按钮的行为应该有所不同。它将用户推送到用户列表页面。

总而言之，转到列表按钮的工作原理如下：

board -> detail -> click go to the list -> board
profile -> detail -> click go to the list -> user-list

为了根据用户所在的位置将用户推送到不同的页面，我需要查看用户来自哪里，因此我需要查看历史堆栈，或者是否有其他方法可以检查用户来自哪个网址？

我正在使用 Next.js 和react-dates构建一个应用程序。

我有两个组件DateRangePicker组件和DayPickerRangeController组件。

当窗口的宽度大于1180px时，我想渲染DateRangePicker，如果尺寸小于这个，我想渲染DayPickerRangeController。

这是代码：

      windowSize > 1180 ?
           <DateRangePicker
             startDatePlaceholderText="Start"
             startDate={startDate}
             startDateId="startDate"
             onDatesChange={handleOnDateChange}
             endDate={endDate}
             endDateId="endDate"
             focusedInput={focus}
             transitionDuration={0}
             onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
               } else {
                 setFocus(focusedInput)
                }
               }}
                /> :
             <DayPickerRangeController
               isOutsideRange={day => isInclusivelyBeforeDay(day, moment().add(-1, 'days'))}
               startDate={startDate}
               onDatesChange={handleOnDateChange}
               endDate={endDate}
               focusedInput={focus}
               onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
                 } else {
                  setFocus(focusedInput)
                 }
               }}
              /> 
          }

我通常使用反应钩与窗口对象检测窗口屏幕宽度像这

但是我发现ssr的时候这种方式是不可用的，因为ssr渲染没有window对象。

无论ssr如何，是否有另一种方法可以安全地获得窗口大小？

这是 React.js 中关于 useMemo hook 的常见解释

useMemo(compute, dependencies) invokes compute, memoizes the calculation result, and returns it to the component.\n\nIf during next renderings the dependencies don\xe2\x80\x99t change, then useMemo() doesn\xe2\x80\x99t invoke compute but returns the memoized value.\n\n- Dmitri Pavlutin\n

但是，我看到 useMemo 挂钩的示例返回如下所示的数组。

React.useMemo(() => [1, 2, 3], []);\n

如您所见，useMemo 返回一个数组，该数组在 Javascript 中被视为对象。

这很令人困惑。我认为 useMemo 钩子的用法是为了记忆计算值。

所以我做了一些测试来弄清楚 useMemo 与对象是如何工作的

const Child = React.memo(({ obj }) => {\n\n  console.log('this is child component')\n\n  return <div>Child Component</div>\n})\n\nconst …

每当我从服务器获取数据时，我都使用 Sapper 构建项目时，预加载函数在 script context="module" 内声明，如下所示。

<script context="module">
  export async function preload(page) {
    return await this.fetch(`https://reqres.in/api/users?page=1`)
    .then(res1 => {
      return res1.json()
    }).then(res2 => {
      return { 
        notices: res2.data,
      }
    })
  }
</script>

根据文件

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance. 

但是当模块第一次评估时是什么意思？

这是否意味着组件首次呈现时？那么和下面的代码一样在 onMount 生命周期方法中声明 api fetch 函数不一样吗？

<script>
  onMount(async() => {
    const res = await fetch(`https://reqres.in/api/users?page=1`);
    const json = await res.json();
  })
</script>

我创建了一个过滤器，当我单击确认按钮时，它会更改 url。

例如，当我单击第 1 页并在巴黎放置类型宾馆时，网址如下所示。

http://localhost3000/findstay?page=1&per=10&place_type=guest_house&city=paris

现在我想改变 url 更改时的结果。假设当我手动更改查询参数（如下所示）时，过滤器也应该更改。

http://localhost3000/findstay?page=1&per=10&place_type=hotel&city=newYork

为此。我在页面文件夹中创建了一个文件名findstay ，并在组件文件夹内创建了findstay-filter组件。

import React from "react";
import FindstayFilter from "@/components/findstay/findstay-filter";

interface IFindstayProps { };

const Findstay: React.FC<IFindstayProps> = () => {
  return <FindstayFilter />;
};

export default Findstay;

我解释的所有逻辑都写在FindstayFilter组件内部。

这是渲染FindstayFilter时推送 url 的代码。

 useEffect(() => {
    const { city, page, per, placeType } = query;
    const _page = parseInt(page || 1 as any);
    const _city = city || state.cityState; // paris
    const _placeType = placeType …

在求职面试中，有人问我如何在 React 中优化组件。

所以我用一个使用useCallback和useMemo钩子的例子来回答。

因为每当组件重新渲染时，组件内部声明的函数和变量都是新创建的，这会导致这些新创建的值占用内存空间。

然而，在这两个钩子的帮助下，可以节省内存，因为使用useCallback和useMemo可以防止通过保存和重用先前的结果来一次又一次地创建函数和变量，只要依赖数组中的状态没有改变在组件重新渲染期间。

到目前为止，这是我的答案。但是面试官说useCallback不阻止创建函数。即使使用了useCallback，仍然会创建一个函数。

我不明白这部分。在 useCallback 钩子中如何再次创建该函数？

我对useCallback和useMemo有什么遗漏吗？

我正在制作一个简单的应用程序，用户可以增加或减少成人、儿童和婴儿的数量。

我想在一个状态中管理这些状态作为一种对象形式，如下所示。

  const [numberState, setNumberState] = useState({
    adultCount: 0,
    childCount: 0,
    babyCount: 0
  });

下面的代码是用户可以增加或减少成人，儿童和婴儿数量的部分。

            <div className="tit">Number</div>
                <dl>
                    <dt><span>Adult</span></dt>
                        <dd>
                            <div className="number_count">
                                <button type="button" className="btn_minus" onClick={() => handleNumberState("adult", "minus")}>minus</button>
                                <span className="input-num"><input type="number" value={adultCount} /></span>
                                <button type="button" className="btn_plus" onClick={() => handleNumberState("adult", "plus")}>plus</button>
                            </div>
                        </dd>
                    <dt><span>Child</span></dt>
                        <dd>
                            <div className="number_count">
                                <button type="button" className="btn_minus" onClick={() => handleNumberState("child", "minus")}>minus</button>
                                <span className="input-num"><input type="number" value={childCount} /></span>
                                <button type="button" className="btn_plus" onClick={() => handleNumberState("child", "plus")}>plus</button>
                            </div>
                        </dd>
                    <dt><span>Baby</span></dt>
                        <dd>
                            <div className="number_count">
                                <button type="button" className="btn_minus" onClick={() => handleNumberState("baby", "minus")}>minus</button>
                                <span …

我正在尝试使用 javascript 将对象数组转换为数组对象。

这是代码

const data = [{
  yearMonthKey: "201907",
  dayKey: "15",
  startDate: "2019-07-15 00:00:00+0900",
  title: "testProgrma"
},
             {
  yearMonthKey: "201907",
  dayKey: "15",
  startDate: "2019-07-15 00:00:00+0900",
  title: "testProgrma"
},
            {
  yearMonthKey: "201907",
  dayKey: "16",
  startDate: "2019-07-15 00:00:00+0900",
  title: "testProgrma12313"
},
            {
  yearMonthKey: "201908",
  dayKey: "15",
  startDate: "2019-07-15 00:00:00+0900",
  title: "testProgrma"
}]

let programs = {};

我想使用程序对象来制作一个对象，如下所示。

{
  201907: {
    15: [{
      yearMonthKey: "201907",
      dayKey: "15",
      startDate: "2019-07-15 00:00:00+0900",
      title: "testProgrma"
    },
        {
      yearMonthKey: "201907",
      dayKey: "15",
      startDate: "2019-07-15 …

当我搜索有关复合组件模式的文章时，我发现可以像 javascript 对象一样通过点表示法访问子组件。

这怎么可能以及它是如何运作的？这是否有效，因为组件也是 javascript 的对象？

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);