react hooks入门 -useRef

Hooks全部入门

useState

useEffect

useContext

useRef

重要：自定义hooks

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

import React, { useEffect, useRef } from 'react';

window.count = 0;

const useRefDemo = () => {
  const count = useRef(0);
  const [n, setN] = React.useState(0);
  useEffect(() => {
    count.current += 1;
    window.count += 1;
  });
  return(
    <div>
      <p>n:{n}</p>
      <p>window.count: {window.count}</p>
      <p>count.current: {count.current}</p>
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  )
};

export default useRefDemo;