Reactjs 何时使用UseImperialiveHandle、useLayoutEffect和useDebugValue

我无法理解为什么需要以下

UseImperialiveHandle

、

useLayoutEffect

和

useDebugValue

钩子，您能否给出可以使用它们的示例，但请不要给出文档中的示例。

UseImperialiveHandle

useImperialiveHandle

允许您确定哪些属性将在引用上公开。在下面的示例中，我们有一个按钮组件，我们希望在该引用上公开

someExposedProperty

属性：

[index.tsx]

import React, { useRef } from "react";
import { render } from "react-dom";
import Button from "./Button";

import "./styles.css";

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

  const handleClick = () => {
    console.log(Object.keys(buttonRef.current)); // ['someExposedProperty']
    console.log("click in index.tsx");
    buttonRef.current.someExposedProperty();
  };

  return (
    <div>
      <Button onClick={handleClick} ref={buttonRef} />
    </div>
  );
}

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

import React, { useRef, useImperativeHandle, forwardRef } from "react";

function Button(props, ref) {
  const buttonRef = useRef();
  useImperativeHandle(ref, () => ({
    someExposedProperty: () => {
      console.log(`we're inside the exposed property function!`);
    }
  }));
  return (
    <button ref={buttonRef} {...props}>
      Button
    </button>
  );
}

export default forwardRef(Button);

import React，{useRef}来自“React”；
从“react dom”导入{render}；
从“/”按钮导入按钮；
导入“/styles.css”；
函数App（）{
const buttonRef=useRef（null）；
常量handleClick=（）=>{
console.log（Object.keys（buttonRef.current））；//['someExposedProperty']
log（“点击index.tsx”）；
buttonRef.current.someExposedProperty（）；
};
返回(
);
}
const rootElement=document.getElementById（“根”）；
渲染(

useLayoutEffect
这与
useffect
相同，但只有在所有DOM突变完成后才会触发。来自Kent C.Dodds，他和其他人一样解释了这两种差异，他说：

99%的时间[
useffect
]是您想要使用的

我还没有看到任何例子能够很好地说明这一点，我也不确定我是否能够创建任何东西。最好的说法是，只有当
useffect
出现问题时，才应该使用
useLayoutEffect

useDebugValue
我想做一个很好的例子来解释这一点。如果你有一个定制的钩子，并且你想在React DevTools中标记它，那么这就是你所使用的

如果您对此有任何具体问题，那么最好是发表评论或提出另一个问题，因为我觉得人们在这里提出的任何问题都只是在重复文档，至少在我们遇到更具体的问题之前。
请允许我在回答这个问题之前说明，所有这些挂钩很少使用。99%的时间，你不会需要这些。它们只是为了涵盖一些罕见的情况


使用命令式处理
通常，当您使用
useRef
时，您会获得
ref
所附加组件的实例值。这允许您直接与DOM元素交互

useImperialiveHandle
非常相似，但它允许您做两件事：

它使您可以控制返回的值。您可以显式地声明返回值，而不是返回实例元素（请参见下面的代码段）
它允许您用自己的函数替换本机函数（如
blur
，
focus
等），从而允许对正常行为或完全不同的行为产生副作用。不过，您可以随意调用该函数
可能有很多原因需要执行上述任一操作；可能不希望向父级公开本机属性，或者可能需要更改本机函数的行为。原因可能有很多。但是，
useImperialiveHandle
很少使用

useImperialiveHandle
自定义在使用
ref

示例

在本例中，我们将从
ref
中获得的值将只包含我们在
useImperialiveHandle
中声明的函数
blur
。它将不包含任何其他属性（我记录该值以演示这一点）。函数本身也是“自定义的”与您通常期望的行为不同。在这里，它设置
document.title
，并在调用
blur
时模糊输入


constmyinput=React.forwardRef（（props，ref）=>{
const[val，setVal]=React.useState（“”）；
const inputRef=React.useRef（）；
React.useImperialiveHandle（参考文献，（）=>({
模糊：（）=>{
document.title=val；
inputRef.current.blur（）；
}
}));
返回(
setVal（e.target.value）}
{…道具}
/>
);
});
常量应用=（）=>{
const ref=React.useRef（null）；
常数onBlur=（）=>{
console.log（ref.current）；//只包含一个属性！
ref.current.blur（）；
};
返回；
};
ReactDOM.render（，document.getElementById（“app”）；


使用命令式处理

通常，通过将函数组件放在forwardRef中，钩子将基于函数的组件方法和属性公开给其他组件
范例

const边栏=forwardRef（（道具，ref）=>{
常量[visibility，setVisibility]=useState（null）
常量opensideBar=（）=>{
设置可见性（！可见性）
}
使用命令式句柄（参考，（）=>({
opensideBar:（）=>{
集合（）
}
}))
返回(
显示侧边栏
{可见性==真(

主页
关于
服务
联系人
库

)：null}
)
}
//使用边栏组件


类主扩展组件{
myRef=createRef（）；
render（）{
返回(
{
///听到我们调用边栏组件了吗
这个.myRef？.current？.opensideBar（）
}}>
显示边栏
)
}
}
<
const Sidebar=forwardRef((props,ref)=>{

       const [visibility,setVisibility]=useState(null)
       
       const opensideBar=()=>{
         setVisibility(!visibility)
       }
        useImperativeHandle(ref,()=>({
            
            opensideBar:()=>{
               set()
            }
        }))
        
       return(
        <Fragment>
         <button onClick={opensideBar}>SHOW_SIDEBAR</button>
         {visibility==true?(
           <aside className="sidebar">
              <ul className="list-group ">
                <li className=" list-group-item">HOME</li>
                <li className=" list-group-item">ABOUT</li>
                <li className=" list-group-item">SERVICES</li>
                <li className=" list-group-item">CONTACT</li>
                <li className=" list-group-item">GALLERY</li>
             </ul>
          </aside>
         ):null}
        </Fragment>
       )
     }
    
    
    //using sidebar component 


 
class Main extends Component{
    
     myRef=createRef();
    
     render(){
      return(
       <Fragment>
         <button onClick={()=>{
                     ///hear we calling sidebar component
                     this.myRef?.current?.opensideBar()
                    }}>
          Show Sidebar
        </button>
        <Sidebar ref={this.myRef}/>
       </Fragment>
      )
     }
 }