Reactjs 每次按下该键时，React都会重新渲染所有内容

我在下面有一个图表和一个输入字段。基本上，用户可以问一个问题，图表也会随之改变。下面是它的样子

下面是代码示例（忽略CoreUI语法）

我怀疑这部分代码有问题

<CInput 
   size="16" 
   type="text" 
   value={userInput || ""}
   onChange={e=> handleTextBoxInput(e)}
   onClick={e=> handleTextBoxClick(e)}   
   onKeyPress={e => handleTextBoxEnter(e)}
   id="userQuery"
/>

但是没有帮助。我甚至读过

备忘录

，但不确定在我的情况下在哪里或如何应用它。我做错了什么

观察

正如

@Matthew

所述，箭头语法每次都会创建不同的回调，这有助于重新呈现，因此必须删除

---

但是，即使在删除它之后，每次按下一个键，图表都会被重新渲染。我正在使用

Chartjs

，它在内部使用

canvas

。

Chartjs

是个问题吗？

关于问题代码，您是正确的

<CInput 
   size="16" 
   type="text" 
   value={userInput || ""}
   onChange={e=> handleTextBoxInput(e)} // performance issue
   onClick={e=> handleTextBoxClick(e)}  // performance issue 
   onKeyPress={e => handleTextBoxEnter(e)} // performance issue
   id="userQuery"
/>

handleTextBoxInput（e）}//性能问题
onClick={e=>handleTextBoxClick（e）}//性能问题
onKeyPress={e=>handleTextBoxEnter（e）}//性能问题
id=“userQuery”
/>

当上述代码多次运行时，每次都会重新创建函数。因此，与其这样做，下面的内容就足够了

<CInput 
   size="16" 
   type="text" 
   value={userInput || ""}
   onChange={handleTextBoxInput}
   onClick={handleTextBoxClick}
   onKeyPress={handleTextBoxEnter}
   id="userQuery"
/>

---

useCallback

hook返回一个回调函数。您只需将返回值用作正常事件回调。

关于问题代码，您是正确的

<CInput 
   size="16" 
   type="text" 
   value={userInput || ""}
   onChange={e=> handleTextBoxInput(e)} // performance issue
   onClick={e=> handleTextBoxClick(e)}  // performance issue 
   onKeyPress={e => handleTextBoxEnter(e)} // performance issue
   id="userQuery"
/>

handleTextBoxInput（e）}//性能问题
onClick={e=>handleTextBoxClick（e）}//性能问题
onKeyPress={e=>handleTextBoxEnter（e）}//性能问题
id=“userQuery”
/>

当上述代码多次运行时，每次都会重新创建函数。因此，与其这样做，下面的内容就足够了

<CInput 
   size="16" 
   type="text" 
   value={userInput || ""}
   onChange={handleTextBoxInput}
   onClick={handleTextBoxClick}
   onKeyPress={handleTextBoxEnter}
   id="userQuery"
/>

---

useCallback

hook返回一个回调函数。您只需将返回值用作正常事件回调。

在您的输入中，每个按键都会触发两个事件-

onKeyPress

和

onChange

-删除

onKeyPress

我怀疑

handleTextBoxEnter

调用了

settmpresponse

来更新tempResponse。设置UI所依赖的状态将触发重新渲染

您还应该使用事件处理表单提交。如果一个元素在表单内部有焦点，并且按下回车按钮，它将在提交时触发

<form onSubmit={handleTextBoxEnter}></form>

此外，如果关键帧发生更改，则将重新渲染。您正在调用密钥中的函数，因此每次更新时都会对其进行更新

tempResponse.data.map((value, i) => (  
 <ChartRender key={`chart-${i}`} data={value} />
))

tempResponse.data.map（（值，i）=>）
))

仅供参考，手动为密钥溢出创建UUID

export const YourComponent = (): JSX.Element => {
  const [userInput, setUserInput] = useState('');
  const [tempResponse, setTempResponse] = useState({ data: [], loading: true });

  useEffect(()=>{
    // handle initial data loading and set loading to false
  }, [])

  const handleSubmit = (e) => {
    e.preventDefault();
    setTempResponse(your_state_data);
  };

  // e.preventDefault shouldn't be used here and is not required
  const handleChange = ({ target }) => setUserInput(target.value);

  if (tempResponse.loading) {
    return <Loading />;
  }

  // action is set to # for iOS - an action is required to show the virtual submit button on the keyboard
  return (
    <>
      <form action="#" onSubmit={handleSubmit}>
        <input defaultValue={userInput} onChange={handleChange} type="text" />
        <button type="submit">Submit</button>
      </form>
      {!!tempResponse.length &&
        tempResponse.data.map((value, i) => (
          <ChartRender key={`chart-${i}`} data={value} />
        ))}
    </>
  );
};

export const YourComponent=（）：JSX.Element=>{
const[userInput，setUserInput]=useState（“”）；
const[tempResponse，setTempResponse]=useState（{data:[]，load:true}）；
useffect（（）=>{
//处理初始数据加载并将加载设置为false
}, [])
常量handleSubmit=（e）=>{
e、 预防默认值（）；
setTempResponse（您的状态数据）；
};
//e.preventDefault不应在此处使用，也不是必需的
consthandlechange=（{target}）=>setUserInput（target.value）；
if（tempResponse.loading）{
返回；
}
//操作设置为#对于iOS-需要操作才能在键盘上显示虚拟提交按钮
返回(
提交
{！！tempResponse.length&&
tempResponse.data.map（（值，i）=>(
))}
);
};

在您的输入中，每个按键都会触发两个事件-

onKeyPress

和

onChange

-删除

onKeyPress

我怀疑

handleTextBoxEnter

调用了

settmpresponse

来更新tempResponse。设置UI所依赖的状态将触发重新渲染

您还应该使用事件处理表单提交。如果一个元素在表单内部有焦点，并且按下回车按钮，它将在提交时触发

<form onSubmit={handleTextBoxEnter}></form>

此外，如果关键帧发生更改，则将重新渲染。您正在调用密钥中的函数，因此每次更新时都会对其进行更新

tempResponse.data.map((value, i) => (  
 <ChartRender key={`chart-${i}`} data={value} />
))

tempResponse.data.map（（值，i）=>）
))

仅供参考，手动为密钥溢出创建UUID

export const YourComponent = (): JSX.Element => {
  const [userInput, setUserInput] = useState('');
  const [tempResponse, setTempResponse] = useState({ data: [], loading: true });

  useEffect(()=>{
    // handle initial data loading and set loading to false
  }, [])

  const handleSubmit = (e) => {
    e.preventDefault();
    setTempResponse(your_state_data);
  };

  // e.preventDefault shouldn't be used here and is not required
  const handleChange = ({ target }) => setUserInput(target.value);

  if (tempResponse.loading) {
    return <Loading />;
  }

  // action is set to # for iOS - an action is required to show the virtual submit button on the keyboard
  return (
    <>
      <form action="#" onSubmit={handleSubmit}>
        <input defaultValue={userInput} onChange={handleChange} type="text" />
        <button type="submit">Submit</button>
      </form>
      {!!tempResponse.length &&
        tempResponse.data.map((value, i) => (
          <ChartRender key={`chart-${i}`} data={value} />
        ))}
    </>
  );
};

export const YourComponent=（）：JSX.Element=>{
const[userInput，setUserInput]=useState（“”）；
const[tempResponse，setTempResponse]=useState（{data:[]，load:true}）；
useffect（（）=>{
//处理初始数据加载并将加载设置为false
}, [])
常量handleSubmit=（e）=>{
e、 预防默认值（）；
setTempResponse（您的状态数据）；
};
//e.preventDefault不应在此处使用，也不是必需的
consthandlechange=（{target}）=>setUserInput（target.value）；
if（tempResponse.loading）{
返回；
}
//操作设置为#对于iOS-需要操作才能在键盘上显示虚拟提交按钮
返回(
提交
{！！tempResponse.length&&
tempResponse.data.map（（值，i）=>(
))}
);
};

使用onBlur比使用onChange更适合您吗？@devnull69在使用onBlur时，我无法再在文本框中键入内容。函数的绑定方式不会导致它重新编写。这就是为什么它不能解决你的问题。引用函数是一种很好的做法，但这不是你的问题。使用onBlur比onChange更适合你吗？@devnull69使用onBlur时，我无法再在文本框中键入内容。函数的绑定方式不会导致它重新注册。这就是为什么它不能解决你的问题。引用函数是一种很好的做法，但这不是你的问题。@Mathew谢谢你的回答。我也需要访问事件参数。我该怎么做？默认情况下，

onClick

之类的事件侦听器将

事件

对象传递给回调。我理解。我可以访问我的事件参数并执行操作。