标签: rerender

在基于多个用户上下文呈现整个页面并发出多个$http请求之后,我希望用户能够切换上下文并再次重新呈现所有内容(重新发送所有$http请求等).如果我只是将用户重定向到其他地方,那么事情就会正常运行:

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

如果我使用$window.location.reload(),那么一些$http请求auth.impersonate(username)等待响应被取消,所以我不能使用它.此外,黑客$location.path($location.path())也不起作用(没有任何反应).

是否有另一种方法可以重新呈现页面而无需再次手动发出所有请求？

我ul在视图中有一堆连接列表,它们使用jQuery UI:Sortable指令,以便于拖放和重新排序列表项.

我通过jQuery UI进行的拖拽拖放我申请$scope使用该$apply功能,这部分工作...

然而,我现在遇到的问题是,在进入其中一些列表时,我提供了一个用户需要填写的自定义表单.

用户可以选择:

1. 填写表格并继续,然后进行$apply调用以将数据保存到$scope
2. 单击取消按钮而不是调用$apply存储信息,应该还原最后一次拖放交互有效地"重新渲染"我的所有列表以反映仍处$scope于此阶段的数据(因为最新的拖动没有对它有任何影响).

这个"取消"按钮的效果有效地将所有内容恢复到用户拾取列表项并将其拖入另一个列表之前的点.

如何强制"刷新"或"重新渲染"我的ng-repeats,以便他们在视觉上刷新并$scope再次显示当前数据？

我需要在表单重新渲染后重新执行javascript.简单地说,在XHTML内容之后放入javascript将无法帮助,因为它是部分请求.另外,我不能使用"onComplete"作为我重新渲染表单的commandButton是在几个地方使用的JSF组件.我需要在本地修复.

有什么办法吗？我想知道f:ajax在这种情况下是否会有所帮助.

如果有人对此有任何疑问,请告诉我.

我定义了一个场景：我们有一个使用父级道具和自身状态的组件。

有两个组件 DC 和 JOKER 以及我在下面的步骤：

1. 单击 DC 的按钮
2. DC 设置计数
3. JOKER 将使用旧状态进行渲染
4. 运行 useEffect 和 setCount
5. JOKER 再次渲染

我想问一下为什么 JOKER 渲染两次（第 3 步和第 5 步），而第一个渲染浪费了性能。我只是不想要第 3 步。如果在类组件中，我可以使用 componentShouldUpdate 来避免它。但是 Hooks 有同样的东西吗？

我的代码在下面，或者打开这个网站https://jsfiddle.net/stephenkingsley/sw5qnjg7/

import React, { PureComponent, useState, useEffect, } from 'react';

function JOKER(props) {
  const [count, setCount] = useState(props.count);
  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count);
  }, [props.count]);

  console.log('I am JOKER\'s  render-->', count);
  return (
    <div>
      <p style={{ color: 'red' }}>JOKER: You clicked …

如果像这样的代码通过 的useEffect依赖关系重新渲染，

// ...
const Test = () => {
  // ...
  
  const value1 = "test1"
  
  const func1 = () => {
    // do something1
  }
  
  useEffect(() => {
    const value2 = "test2"
  
    const func2 = () => {
      // do something2
    }
  }, [sth])
  
  return (
    // ...
  )
}

value1&&&value2重新分配内存吗func1？func2

我很好奇，与优化有关。

Next.JS 使用 babel 来配置 Why Did You Render。

module.exports = function (api) {
    const isServer = api.caller((caller) => caller?.isServer)
    const isCallerDevelopment = api.caller((caller) => caller?.isDev)

    const presets = [
        [
            'next/babel',
            {
                'preset-react': {
                    importSource:
                        !isServer && isCallerDevelopment
                            ? '@welldone-software/why-did-you-render'
                            : 'react'
                }
            }
        ]
    ]

    return {presets}
}

如何在不禁用 SWC 的情况下更新到 Next.JS 12？

我有一个视图,它持有车把模板.该模板由另一个部分模板组成.该部分模板包含结果列表,我在我的应用程序的不同部分使用.无论如何,当试图过滤结果时,我只想渲染那部分.意味着骨干视图不应该使整个视图只是局部的.能做到吗？

我有一个 Ul 组件，其中包含一组具有不同值的对象。此列表中名为 TestCase 的每个项目都有一个按钮，用于进行重新调用并更新其对象。然而，并不是所有的 TestItem 都需要更新。只有那些按钮被点击的人。此数组的状态存储在名为 TestCaseContainer 的父容器组件中。但是，我的按钮将根据数组中受影响的 TestItem 相应地更新状态。这会导致整个列表重新呈现。如何只呈现更改的 TestItems，而不是每次更新元素时​​都呈现整个 ul。我读过使用 useMemo 以便组件可以记住传递的道具，但是我不知道如何正确实现它。

我怎样才能停止所有的重新渲染！！为乱码提前道歉！

这是我的代码

Regression.js - 保存所有状态

const Testing = forwardRef((props,ref) => {


  const templateTestItem = {id:0,formData:{date:'',env:'',assetClass:'',metric:'',nodeLevel:'',nodeName:'',testName:'',dataType:'',tradeId:''},results:[],isLoading:false}
  const testCaseRef = useRef()
  const [isRun, setIsRun] = useState(false)
  const [testItems, setTestItems] = useState([ templateTestItem])
  const [stats,setStats] = useState(null)


  const addTestItem = () => {

    const newIndex = testItems.length 
    // console.log(newIndex)

    const templateTestItem = {id:newIndex,formData:{date:'',env:'',assetClass:'',metric:'',nodeLevel:'',nodeName:'',testName:'',dataType:'',tradeId:''},results:[],isLoading:false}
    setTestItems([...testItems, templateTestItem])

  }

  const addUploadCases = (cases) => {

    setTestItems([])
    const UploadedItems = cases.map((item,index)=>{

        return{ …

我有一个如下的答案列表:

每个列表项都是骨干模型.

{
  title: 'answer title...',
  content: 'answer content...',
  voteStatus: 'up'
}

当我点击向上投票或向下投票时,模型voteStatus将会更改,并且此答案项目将重新呈现.

如果答案内容中有图片,图片也会重新渲染,但这不是我想要的.

当我改变时,我怎么能重新渲染投票按钮voteStatus？

我在 flatlist 的页脚中放置了一个输入字段，但是当我尝试输入任何内容时，它会自动关闭键盘，因为重新渲染了 flatlist 页脚。

我试图从 Scrollview 嵌套 flatlist 但这带来了警告..

如何阻止页脚被重新渲染？我可以在不嵌套 Scrollview 的 flatlist 的情况下解决这个问题吗？

<FlatList
              ListHeaderComponent={() => (
                <View style={styles.discountContainer}>
                  <Text style={[styles.buttonText, { letterSpacing: 3 }]}>
                    10% DISCOUNT ON 8 COURSES
                  </Text>
                </View>
              )}
              numColumns={2}
              data={data}
              renderItem={({ item }) => (
                <View>
                  <SingleProduct item={item} />
                </View>
              )}
              ListFooterComponent={() => (
                <View>
                  <View style={styles.couponContainer}>
                    <Input
                      placeholder='Coupon code'
                      placeholderTextColor='#0a5796'
                      color='#0a5796'
                      inputStyle={{
                        color: '#0a5796',
                      }}
                      inputContainerStyle={{
                        borderBottomWidth: 0,
                        height: 50,
                      }}
                      containerStyle={styles.couponInputContainer}
                      onChangeText={(value) =>
                        this.setState({ couponCode: value })
                      }
                      value={this.state.couponCode}
                    />
                    {couponLoading …