react高级开发技巧

React 高级开发技巧主要包括以下几点：

1. 使用高阶组件 (Higher-Order Components, HOC) 来复用组件逻辑。
2. 使用 React.PureComponent 来提高组件性能。
3. 使用 React Fragments 来减少不必要的外层标签。
4. 使用 React Portals 来渲染子节点到父组件之外的 DOM 节点。
5. 使用 React.memo 来优化渲染，仅在输入数据改变时重新渲染组件。
6. 使用自定义 Hooks 来复用状态逻辑。
7. 使用 Error Boundaries 来处理组件树中的错误。

以下是一个自定义 Hook 的例子，用于维护组件状态：

import React, { useState, useEffect } from 'react';
 
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue || 0);
 
  useEffect(() => {
    // 假设我们在这里进行了一些副作用的设置
    console.log(`Counter count is: ${count}`);
  }, [count]);
 
  return [count, setCount];
}
 
function CounterComponent(props) {
  const [count, setCount] = useCounter(props.initialValue);
 
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </>
  );
}
 
export default CounterComponent;

这个例子中，我们创建了一个名为 useCounter 的自定义 Hook，它返回一个计数器的状态和设置状态的函数。然后我们创建了一个 CounterComponent 组件，它使用了这个 Hook 来提供用户界面来操作计数器。这样，我们就可以在多个组件中重用计数器的逻辑了。