리액트 훅: useRef Hook에 대해 .current가 null인 이유는 무엇입니까?

리액트 훅: useRef Hook에 대해 .current가 null인 이유는 무엇입니까?

컴포넌트의 간단한 예를 다음에 나타냅니다.

function App() {
  const observed = useRef(null);
  console.log(observed.current);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

그런 것 같아요observed.current모든 속성을 가진 div 요소가 아닌 유형 요소이며 전류는 비어 있지 않습니다.제 이해는 다음과 같습니다.

1. 참조가 null 값으로 초기화되었습니다.
2. Null이 참조에 의해 덮어쓰기되었습니다.

하지만 알고 보니.current는 비어 있습니다.이는 관찰된 함수를 Element 유형의 인수를 예상하는 함수에 전달하려고 하기 때문에 좋지 않습니다.

https://codesandbox.io/embed/purple-forest-0460k

Ref.current함수가 반환되고 내용이 렌더링될 때까지 ref가 설정되지 않기 때문에 null입니다.useEffect 후크는 전달된 배열의 내용 값이 변경될 때마다 실행됩니다.패스해서observed어레이 내 및 로그인을 하는 콜백을 전달함으로써observeduseEffect 후크를 사용하여 작업을 수행할 수 있습니다.

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

편집: 참조를 변경하면 재렌더가 트리거되지 않으므로 첫 번째 렌더링에서만 작동합니다.그러나 useEffect에 대한 일반적인 설명은 여전히 유효합니다.dom 요소의 ref에 대한 변경을 관찰하려면 콜백을 ref로 사용할 수 있습니다.

  <div 
    ref={el => { console.log(el); observed.current = el; }} // or setState(el)
    className="App"
  >

코드 샌드박스

이게 내가 전화하고 나서 하게 된 일이야useEffect에rlvRef는 모든 이벤트를 캡처하지 않았습니다.

const rlvRef = useRef()
const [refVisible, setRefVisible] = useState(false)

useEffect(() => {
  if (!refVisible) { 
    return
  }
  // detected rendering
}, refVisible)

return (
  <RecyclerListView
    ref={el => { rlvRef.current = el; setRefVisible(!!el); }}
    ... 
  />
)

그 당시에console.log발생하다ref아직 설정되지 않았습니다.한번 써보세요.console.log에useEffect훅을 걸면 원하는 대로 작동합니다.

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const observed = useRef(null);

  useEffect(() => {
    console.log(observed.current);
  }, [observed]);

  return (
    <div ref={observed} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

값을 useRef()-variable로 설정해야 했습니다.이 변수는 비동기 http-request에 의해 취득되어 useState()-variable에 저장됩니다.따라서 useEffect()-함수에서도 의존관계로 제공할 필요가 있었습니다.

    const [object, setObject] = useState('');

    const fetchObject = useCallback(async () => {
        const res = await fetch(apiUrl + "/object/", {});
        setObject({ ...await res.json() });
    }, [apiUrl]);

    const jsonEditor = React.createRef();

    useEffect(() => {
        fetchObject();
        if (jsonEditor.current && object.json) {
            jsonEditor.current.jsonEditor.set(JSON.parse(object.json));
        }
    }, [fetchObject, object.json]);

return (
    <div>
        <JsonEditor
            ref={jsonEditor}
            onChangeText={onChangeTextHandler}
        />
    </div>);

언급URL : https://stackoverflow.com/questions/56541342/react-hooks-why-is-current-null-for-useref-hook