在React.js表单组件中使用状态或引用?

reactjs React.js

神乐路易

2020-03-12

我从React.js开始,我想做一个简单的表格,但是在文档中我找到了两种方法。

第一种是使用参考文献

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

第二个是使用状态内的阵营组分:

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({value: ''
  });
});

我看不出这两种选择的优缺点,如果有的话。谢谢。

第951篇《在React.js表单组件中使用状态或引用?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
TonyPro 2020.03.12

我已经看到一些人引用以上答案作为“从不使用refs”的理由,我想发表自己的观点(以及与我交谈过的其他一些React开发人员)。

在谈论将其用于组件实例时,“不要使用引用”是正确的。意思是,您不应使用引用作为获取组件实例并在其上调用方法的方法。这是使用裁判的不正确方法,并且是裁判快速往南走的时候。

正确(且非常有用)的引用使用方法是当您使用它们从DOM中获得一些价值时。例如,如果您有一个将引用附加到该输入的输入字段,则稍后通过该引用获取值就很好了。如果没有这种方式,您就需要经过一个精心策划的过程,以使您的输入字段与您的本地州或流量存储区保持最新-这似乎是不必要的。

2019编辑:未来的朋友你好。除了我几年前提到的^之外,借助React Hooks,引用也是跟踪渲染之间的数据的好方法,并且不仅限于获取DOM节点。

猴子古一蛋蛋 2020.03.12

这个帖子很旧。

在这件事上,我将分享我的一点经验。

我正在研究一个大型组件(414行),其中包含许多“动态”输入和涉及的许多缓存数据。(我不是在页面上一个人工作,我的感觉告诉我,代码的结构可能可以更好地拆分,但这不是重点(嗯,可以,但是我正在处理)

我首先使用state处理输入的值:

  const [inputsValues, setInputsValues] = useState([])
  const setInputValue = (id, value) => {
    const arr = [...inputsValues]
    arr[id] = value
    setInputsValues(arr)
  }

当然在输入中:

value={inputsValues[id] || ''}
onChange={event => setInputValue(id, event.target.value)}

渲染非常繁琐,以至于输入更改不连贯,如****(不要试图按住键,文本只会在暂停后出现)

我确信我可以使用ref来避免这种情况。

最终像这样:

  const inputsRef = useRef([])

并在输入中:

ref={input => (inputsRef.current[id] = input)}

[在我的情况下,输入是Material-UI TextField,所以它是:

inputRef={input => (inputsRef.current[id] = input)}

]

因此,无需重新渲染,输入变得流畅,功能相同。它将节省周期和计算,因此也节省了能源。为地球做x)

我的结论:甚至可能需要useRef作为输入值。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android