大量输入 React-native 后，TextInput 变得很慢 [英] TextInput becomes slow after lots of typing React-native

问题描述

我对 React Native 非常陌生，目前我正在使用 expo 构建一个小应用程序.目前，当我们在文本字段中连续输入文本输入时，我遇到了一个问题，即在我的项目中，如果用户在第一个字段中自动输入 3 个数字，它将移至下一个字段.但是如果我们做连续数据提交，输入从第一个到第二个的切换有点太慢了.我找不到任何解决方案.

这是工作小吃小吃

这是我试过的代码

*注意:Numberinput 是一个自定义输入组件

 const ref = React.useRef(View.prototype);const firstref = React.useRef(View.prototype);<视图样式={styles.textinputViewleft}><数字输入样式={styles.textinput}ref={firstref}标签=数字"returnKeyType =下一个"值={数字.值}onChangeText={(text) =>{ setDigit({ value: text, error: '' });if (text.length === 3) { ref.current.focus();} }}错误={!!digit.error}errorText={digit.error}键盘类型=数字"最大长度={3}minLength={3}/></查看><视图样式={styles.textinputView}><数字输入样式={styles.textinput}参考={参考}标签=计数"；值={计数.值}onChangeText={(text) =>setCount({ 值:文本，错误:'' })}错误={!!count.error}errorText={count.error}键盘类型=数字"maxLength={3}/></查看>

解决方案

在您的示例中，每个输入的非必要渲染次数应超过 4 次，我确实使用 ref 为您提供了更好的方法，请检查:

让 renderApp = 0;const App = () =>{const [inputState,setInputState] = React.useState([])返回 (<div><div>渲染应用:{++renderApp}</div><NumberInput setInputState={setInputState}/><表格>{inputState.map((data,i)=>(<tr><th>Digit:{data.digit.value}</th>错误:{data.digit.error}<th>Count:{data.count.value}</th><th>错误:{data.count.error}</th></tr>))}

)}让渲染输入 = 0;const NumberInput = ({setInputState}) =>{常量引用 = {计数:React.useRef(null)，数字:React.useRef(null)}const inputHandler = (e) =>{const name = e.target.name;常量值 = e.target.value;if(value.length === 3){if(name === "count") {setInputState((prev)=>([...prev,{数字:{值:refs.count.current.value，错误:''}，计数:{ 值:refs.digit.current.value，错误:'' }}]))}refs[名称].current.focus()refs[name].current.select();}}返回 (<div><div>渲染输入:{++renderInput}</div><输入ref={refs.count}标签=数字"名称=数字"onChange={inputHandler}类型=数字"最大长度={3}/><输入ref={refs.digit}标签=计数"名称=计数"onChange={inputHandler}类型=数字"最大长度={3}/>

)}ReactDOM.render(, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="react"></div>

I’m very much new to React Native currently i'm building a small app using expo. Currenttly i'm facing an issue when we type in the text fields continously the textinput slowing ie, in my project if the user enters 3 numbers in first field automatically it'll move on to next field. But if we do continous data submitting the switching of input from first one to second one is bit too slow. I could'nt find any solution for this.

This is the working snack Snack

This is the code that i've tried yet

*note : Numberinput is a custom input component

  const ref = React.useRef(View.prototype);
  const firstref = React.useRef(View.prototype);

        <View style={styles.textinputViewleft}>
            <NumberInput 
            style={styles.textinput} 
            ref={firstref}
            label="Digit"
            returnKeyType="next"
            value={digit.value}
            onChangeText={(text) => { setDigit({ value: text, error: '' }); if (text.length === 3) { ref.current.focus(); } }}
            error={!!digit.error}
            errorText={digit.error}
            keyboardType="numeric"
            maxLength={3}
            minLength={3}/>
        </View>
        <View style={styles.textinputView}>
            <NumberInput 
            style={styles.textinput} 
            ref={ref}
            label="Count"
            value={count.value}
            onChangeText={(text) => setCount({ value: text, error: '' })}
            error={!!count.error}
            errorText={count.error}
            keyboardType="numeric"
            maxLength={3}/>
        </View>

解决方案

In your example, number of unnessary render should be more than 4 time per input, I did make you an better approach using ref, check this:

let renderApp = 0;
const App = () => {
  const [inputState,setInputState] = React.useState([])
  return (
      <div>
        <div>Render App: {++renderApp}</div>
        <NumberInput setInputState={setInputState}/>
        <table>
        {inputState.map((data,i)=>(
          <tr>
            <th>Digit:{data.digit.value}</th>
            <th>Error:{data.digit.error}</th>
            <th>Count:{data.count.value}</th>
            <th>Error:{data.count.error}</th>
          </tr>
        ))}
        </table>
      </div>
  )
}
let renderInput = 0;
const NumberInput = ({setInputState}) => {
  const refs = {
    count: React.useRef(null),
    digit: React.useRef(null)
  }
  const inputHandler = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    if(value.length === 3){
      if(name === "count") {
        setInputState((prev)=>([...prev,{
          digit:{ value: refs.count.current.value, error: '' },
          count:{ value: refs.digit.current.value, error: '' }}
        ]))
      }
      refs[name].current.focus()
      refs[name].current.select();
    }
  }
  return (
    <div>
      <div>Render Inputs: {++renderInput}</div>
      <input
        ref={refs.count}
        label="Digit"
        name="digit"
        onChange={inputHandler}
        type="number"
        maxLength={3}
      />
      <input
        ref={refs.digit}
        label="Count"
        name="count"
        onChange={inputHandler}
        type="number"
        maxLength={3}
        />
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

这篇关于大量输入 React-native 后，TextInput 变得很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！