1. setCount(10)与setCount(preCount => preCount + 10) 的区别:
import React, { useState } from 'react';
export default function CounterHook() {
const [count, setCount] = useState(() => 10);
console.log('CounterHook渲染');
function handleBtnClick() {
// 下面这种只会加10
setCount(count + 10);
setCount(count + 10);
setCount(count + 10);
setCount(count + 10);
// 下面这种会加到40
// setCount((prevCount) => prevCount + 10);
// setCount((prevCount) => prevCount + 10);
// setCount((prevCount) => prevCount + 10);
// setCount((prevCount) => prevCount + 10);
}
return (
div>
h2>当前计数: {count}/h2>
button onClick={handleBtnClick}>+10/button>
/div>
);
}
2. 如何在父组件中引用子组件的某个元素? forwardRef
// 父组件
import React, { useEffect, useRef } from 'react';
import Product from './product';
export default function App(props) {
const liRef = useRef();
useEffect(() => {
console.log('ref', liRef.current)
})
return (
>
Product ref={liRef} />
/>
);
}
// 子组件 - 函数组件
import React from 'react';
import { forwardRef } from 'react';
export default forwardRef((props, ref) => {
const getProdInfo = function (e) {
console.log(e.target.innerText);
};
return (
ul onClick={getProdInfo}>
li ref={ref}>商品1/li>
li>商品2/li>
/ul>
);
});
// 子组件 - class组件
import React, { forwardRef } from 'react';
class Product extends React.Component {
constructor(props) {
super(props);
}
getProdInfo = function (e) {
console.log(e.target.innerText);
};
render() {
console.log(1, this.props)
return (
ul onClick={this.getProdInfo}>
li ref={this.props.innerRef}>商品1/li>
li>商品2/li>
服务器托管网 /ul>
);
}
}
export default forwardRef((props, ref) => Product innerRef={ref} {...props} />);
联想:
ref的作用:
- 通过ref操作dom,分为 1.作用在DOM节点上;2作用在组件上(此时为组件的实例);
- 用ref引用一个值;参考官网useRef
3. useImperativeHandle
向父组件暴露一个自定义的 ref 句柄。
默认情况下,组件不会将它们的 DOM 节点暴露给父组件。举例来说,如果你想要 MyInput 的父组件 能访问到 DOM 节点,你必须选择使用 forwardRef
。
import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref服务器托管网) {
return input {...props} ref={ref} />;
});
在上方的代码中,MyInput 的 ref 会接收到 DOM 节点。然而,你可以选择暴露一个自定义的值。为了修改被暴露的句柄,在你的顶层组件调用 useImperativeHandle。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
某日二师兄参加XXX科技公司的C++工程师开发岗位第19面: 面试官:什么是智能指针? 二师兄:智能指针是C++11引入的类模板,用于管理资源,行为类似于指针,但不需要手动申请、释放资源,所以称为智能指针。 面试官:C++11引入了哪些智能指针? 二师兄:三种…