#Tech

Effect

1. 将静态对象和函数移出组件 可以证明他不是响应式的,他不会因为重新渲染而改变，所以他不是依赖。
2. 如果props接收到的类型是对象的值，Effect在每次父组件重新渲染时重新连接，要解决此问题，从Effect外部读取对象信息。
3. 所以避免函数和对象成为依赖，无论是从props中传来的还是组件内的。

function ChatRoom({ options }) {  
	const [message, setMessage] = useState('');  
	
	const { roomId, serverUrl } = options;  
	useEffect(() => {  
		const connection = createConnection({  
		roomId: roomId,  
		serverUrl: serverUrl  
	});  
	connection.connect();  
	return () => connection.disconnect();  
}, [roomId, serverUrl]); // ✅ 所有依赖已声明

自定义Hook

1. hook和函数的区别：只有hook和组件可以调用其他hook。
2. 使用use命名的函数不能在条件语句里调用，tips：如果你在未来计划在该函数内部添加一些Hook调用，那么这样做（使用use前缀）命名就很有意义。
3. 把事件处理函数传到自定义Hook中需要用useEffectEvent