时间戳

首页 > 解决方案 > 为什么我们不应该使用 ref？

javascript - 为什么我们不应该使用 ref？

问题描述

在 Facebook 的文档中refs：

不要过度使用Refs你的第一个倾向可能是在你的应用程序中使用 refs 来“让事情发生”。如果是这种情况，请花点时间更批判性地思考state组件层次结构中应该拥有的位置。通常，很明显“拥有”该状态的适当位置位于层次结构中的更高级别。有关此示例，请参阅 Lifting State Up指南。

在我当前的 React 应用程序中，我有几个div节点要根据条件进行修改。render()这些 div 节点是在'schained 的深处创建的returns。我当然不能使用 Document.queryselector()。我想不出别的了。

文档还试图用文章“提升状态”来解释，但我不明白。有人可以解释一下吗？（ELI5如果可以的话。）

标签： javascriptreactjs

解决方案

提升状态意味着子组件引发事件而不是自己处理状态更改。在React 文档中，他们从每个组件管理自己的状态（handleChange）开始。onTemperatureChange再往下，他们通过添加道具来提升状态。现在，孩子们将状态更改委托给他们最接近的共同父母，Calculator. Calculator更改状态并通过道具向下推新值。

我只在需要调用 DOM 元素上的特定函数时才使用 refs，focus()这是迄今为止我的应用程序中最常见的用法。这个SO 答案有一个很好的例子，在这里复制是因为链接不好：

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

还请务必阅读链接答案下方的答案，autoFocus这是安装时聚焦的正确答案，但您肯定会在某些时候动态地聚焦元素。

推荐阅读