React 优化

1 对象属性直接赋值对象会造成组建刷新

class Demo extends React.PureComponent {
	render() {
		console.log("子组建刷新");
		return (
			<div style={{ fontSize: "16px" }}>
				<h1>{this.props.text}</h1>
				<button onClick={this.props.onClick}>点击</button>
			</div>
		);
	}
}
const Parent = () => {
	console.log("父组建刷新");
	const [text, setText] = useState();
	const [number, setNumber] = useState(0);
	const onClick = useCallback(() => {
		setText("新文本");
	}, []);
	return (
		<div>
			<Demo text={text} onClick={onClick} aa={{}}></Demo>
			<input
				style={{ fontSize: "16px" }}
				type="number"
				value={number}
				onChange={(e) => {
					setNumber(parseInt(e.target.value));
				}}
			></input>
		</div>
	);
};

当修改输入框，父组建刷新，子组建也跟着刷新，因为aa属性是一个对象，所以每次这个对象都会重新生成一个值。

如果aa是一个固定值我们应该直接创建好，然后再给组建赋值。如下

class Demo extends React.PureComponent {
	render() {
		console.log("子组建刷新");
		return (
			<div style={{ fontSize: "16px" }}>
				<h1>{this.props.text}</h1>
				<button onClick={this.props.onClick}>点击</button>
			</div>
		);
	}
}
const aa = {};
const Parent = () => {
	console.log("父组建刷新");
	const [text, setText] = useState();
	const [number, setNumber] = useState(0);
	const onClick = useCallback(() => {
		setText("新文本");
	}, []);
	return (
		<div>
			<Demo text={text} onClick={onClick} aa={aa}></Demo>
			<input
				style={{ fontSize: "16px" }}
				type="number"
				value={number}
				onChange={(e) => {
					setNumber(parseInt(e.target.value));
				}}
			></input>
		</div>
	);
};

aa也不能放在Parent中创建，因为Parent刷新时候aa也会被重新创建。

//TODO。。。。。后续不断更新其他优化方案