我正在学习文档中的 react-redux,并且没有看到以下内容.参考部分指的是什么？和节点？从我看到的那个地方都没有使用这个参考.引用后,引用是否引用DOM上的子组件节点(输入)？如果是这样,为什么不直接参考输入？

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

我在 Vue 2 中有一个对话框窗口组件，它正在侦听事件tcs-show-confirm（它与显示对话框的事件相同，将show属性设置为 true - 在父组件中）：

  @Prop({ default: false })
  show: boolean;

  @Prop()
  buttons: Array<TcsDialogButton>;

  mounted() {

    this.$nextTick(function () {
      TcsEventBus.$on('tcs-show-confirm', () => {
        console.log(this.$refs.tcsdialbuttons);
      });
    });
  }

组件的 html 在这里（页脚插槽的内容不会被另一个组件的 html 替换）：

  ...
  <slot name="footer">
    <div v-if="buttons && buttons.length" ref="tcsdialbuttons" v-for="(button, index) in buttons">
      <button tabindex="0" class="tcs-button tcs-dialog__button" @click="$emit('close', button.emitString)">
        {{button.text}}
      </button>              
    </div>
    <div style="clear: both;"></div>
  </slot>
  ...

问题是 console.log(this.$refs.tcsdialbuttons) 显示一个空数组 []，长度为 0。这是为什么呢？如何访问按钮并将焦点设置在第一个上？

我还尝试将胖箭头功能更改为正常功能：

      TcsEventBus.$on('tcs-show-confirm', function() {
        console.log(this.$refs.tcsdialbuttons);
      });

但现在它返回未定义。

我刚刚发现我不能引用组件中的任何元素，即使它在我的项目中的其他组件中工作。我不明白。。

现在有了C#7,我们可以通过ref返回return ref.根据我的收集,参考是32位或64位.现在,如果我有一个结构Coord用long X和long Y,这将是128位,所以它会更容易通过参考返回坐标,(以及通过它),以避免复制的128位.

另一方面,如果我尝试return refa byte,只有8位,对它的引用会比复制字节本身大得多,对吧？

所以,我的主要问题是:如果我们想要返回的对象可以返回ref(即,不是局部变量)并且其大小大于引用的大小,那么我们应该返回ref吗？

编辑:快速代码示例

// This size is 128 bytes, which is 2 or 4x larger than the size of a reference
public struct Coord                                 
{
    public long X, Y;
}

private Coord myCoord;

// This will return the Coord by value, meaning copying the full 128 bytes
public Coord GetCoordValue() => myCoord;          

// This will return the …

基本上，我只用constructor了React3个原因-

1.如要初始化state-

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
    }
}

但是由于Babel的班级领域支持，我不再使用它

class App extends React.Component {
    state = { counter: 0 };
}

2. bind像-

class App extends React.Component {
    constructor(props) {
        super(props);
        this.increment.bind(this);
    }

    increment() {

    }
}

但是由于arrow功能原因，我不再这样做了

class App extends React.Component {
    increment = () => {

    }
}

3.如要使用createRef-

class App extends React.Component {
    constructor(props) …

在C#中,方法的参数可以是引用类型或值类型.传递引用类型时,将传递引用的副本.这样,如果在方法内部我们尝试将传递的引用重新分配给另一个对象实例,则在该方法之外,重新分配是不可见的.

为了使其工作,C#具有ref修饰符.使用ref传递引用类型实际上使用原始引用而不是副本.(如我错了请纠正我).

在这种情况下,由于我们没有创建引用的副本,我们是否保存了任何内存？如果广泛调用方法,这是否会提高应用程序的整体性能？

谢谢!

我的代码取自官方 React Ref 文档

import React from "react";
import { render } from "react-dom";

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    // this.textInput.current.focus();
    console.log(this.textInput);
  }

  render() {
    // tell React that we want to associate the <input> ref
    // …

我正在通过数组映射，并且为每个项目显示一个带有文本的按钮。假设我希望单击按钮，下面的文本会将其颜色更改为红色。如何定位按钮的同级？我尝试使用ref，但是由于它是映射的jsx，因此只会声明最后一个ref元素。

这是我的代码：

class Exams extends React.Component {
    constructor(props) {
        super()
        this.accordionContent = null;
    }
    state = {
        examsNames: null, // fetched from a server
    }
    accordionToggle = () => {
        this.accordionContent.style.color = 'red'
    }
    render() {
        return (
            <div className="container">
                {this.state.examsNames && this.state.examsNames.map((inst, key) => (
                    <React.Fragment key={key}>
                        <button onClick={this.accordionToggle} className="inst-link"></button>
                        <div ref={accordionContent => this.accordionContent = accordionContent} className="accordionContent">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.</p>
                        </div>    
                    </React.Fragment>
                ))}
            </div>
        )
    }
}


export default Exams;

如所解释的，结果是在每次单击按钮时，将定位到最后一个按钮所附的段落。

提前致谢

我正在使用具有可变时间范围的议程/日历应用程序。要显示当前时间的一行并显示已进行的约会块，我需要计算给定时间范围内一分钟对应多少像素。

因此，例如：如果议程在上午7点开始，在下午5点结束，则总时间为10小时。假设日历的正文高度为1000像素。这意味着每小时代表100像素，每分钟代表1.66像素。

如果当前时间是下午3点。我们距议程开始只有480分钟的路程。这意味着显示当前时间的行应该在距日历正文顶部79.68像素（480 * 1.66）的位置。

计算没有问题，但获得议程主体的高度。我当时在考虑使用React Ref来获取高度，但出现错误：ref.current is null

下面的一些代码：

class Calendar extends Component {
    calendarBodyRef = React.createRef();

    displayCurrentTimeLine = () => {
        const bodyHeight = this.calendarBodyRef.current.clientHeight; // current is null
    }

    render() {
        return (
            <table>
                <thead>{this.displayHeader()}</thead>
                <tbody ref={this.calendarBodyRef}>
                    {this.displayBody()}
                    {this.displayCurrentTimeLine()}
                </tbody>
            </table>
        );
    }
}

考虑以下扩展方法：

public static void Toggle(this ref bool @bool) => @bool = !@bool;

public static void Toggle2(ref this bool @bool) => @bool = !@bool;

这些只是切换 ref 布尔变量值。测试：

class Foo
{
    private bool _flag;
    public void DoWork()
    {
        _flag.Toggle();
        Console.WriteLine(_flag);
        _flag.Toggle2();
        Console.WriteLine(_flag);
    }
}

我们得到：

True
False

问题：选择一种语法或另一种语法是否存在隐藏的差异？

Vetur 在下面这一行下划线 null：

const firstRef = ref<HTMLElement>(null)

没有重载匹配这个调用。
 Overload 1 of 3, '(raw: HTMLElement): Ref', 给出了以下错误。
  “null”类型的参数不能分配给“HTMLElement”类型的参数。
 重载 2 of 3, '(raw: HTMLElement): Ref'，出现以下错误。
  “null”类型的参数不能分配给“HTMLElement”类型的参数。Vetur(2769)

这是一个浓缩的上下文。任何想法我做错了什么？

<template>
  <input id="first" ref="firstRef">
  <button type="button" @click.prevent="focusFirst">Focus</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api"
export default defineComponent({
  name: "Test",
  setup() {
    const firstRef = ref<HTMLElement>(null)
    const focusFirst = () => {
      const theField = firstRef.value
      theField.focus()
    }

    return { focusFirst }
  }
</script>