react指令如何实现
React 指令的实现方式
React 本身没有像 Angular 那样的内置指令系统，但可以通过以下几种方式实现类似功能：
自定义 Hooks
自定义 Hooks 可以封装可复用的逻辑，类似于指令的功能：
function useHighlight(initialColor) {
const [color, setColor] = useState(initialColor);
const highlight = () => {
setColor('yellow');
setTimeout(() => setColor(initialColor), 500);
};
return [color, highlight];
}
// 使用
function MyComponent() {
const [color, highlight] = useHighlight('white');
return <div style={{backgroundColor: color}} onClick={highlight}>Click me</div>;
}高阶组件 (HOC)
高阶组件可以包装组件并添加额外功能：
function withTooltip(Component) {
return function(props) {
const [showTooltip, setShowTooltip] = useState(false);
return (
<div
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
>
<Component {...props} />
{showTooltip && <div className="tooltip">{props.tooltip}</div>}
</div>
);
};
}
// 使用
const ButtonWithTooltip = withTooltip(Button);Render Props
通过 render props 模式共享组件间的代码：
class MouseTracker extends React.Component {
state = { x: 0, y: 0 };
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
});
};
render() {
return (
<div onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
);
}
}
// 使用
<MouseTracker render={({x, y}) => (
<p>鼠标位置: {x}, {y}</p>
)}/>复合组件模式
通过组件组合实现类似指令的功能：
function Toggle({ children }) {
const [on, setOn] = useState(false);
return React.Children.map(children, child =>
React.cloneElement(child, { on, toggle: () => setOn(!on) })
);
}
function ToggleOn({ on, children }) {
return on ? children : null;
}
function ToggleButton({ on, toggle }) {
return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;
}
// 使用
<Toggle>
<ToggleOn>The button is on</ToggleOn>
<ToggleButton />
</Toggle>使用 ref 和 DOM 操作
对于需要直接操作 DOM 的情况，可以使用 ref：
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
return <input ref={inputRef} />;
}每种方法适用于不同场景，自定义 Hooks 适合状态逻辑复用，高阶组件适合横切关注点，render props 适合动态渲染，复合组件适合构建可组合 UI，ref 适合直接 DOM 操作。
