在 TypeScript 中,PureComponent 是 React 库中的一个组件类,它是 React.Component 的一个子类。PureComponent 通过实现 shouldComponentUpdate 方法来优化组件的性能,它会对组件的 props 和 state 进行浅比较,如果发现没有变化,则不会触发组件的重新渲染。
PureComponent 的可选默认属性是指在使用 PureComponent 时,可以为组件的属性设置默认值。这样,在父组件没有传递该属性时,组件会使用默认值作为属性的初始值。
下面是一个示例代码:
import React, { PureComponent } from 'react';
interface MyComponentProps {
name: string;
age?: number;
}
class MyComponent extends PureComponent<MyComponentProps> {
static defaultProps = {
age: 18,
};
render() {
const { name, age } = this.props;
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
}
export default MyComponent;
在上面的示例中,MyComponent 组件接收一个 name 属性和一个可选的 age 属性。如果父组件没有传递 age 属性,那么 age 的默认值将会是 18。
使用示例:
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return <MyComponent name="John" />;
}
export default App;
在上面的示例中,我们在父组件中使用了 MyComponent,并传递了 name 属性,但没有传递 age 属性。因此,MyComponent 组件会使用默认的 age 值(18)进行渲染。
推荐的腾讯云相关产品:无
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云