验证是否在渲染过程中无条件设置 state，这可能会触发额外的渲染和潜在的无限渲染循环。如果需要，你仍然可以在 React 之外使用此语法，例如在独立的工具函数中。
¥Validates against syntax that React Compiler does not support. If you need to, you can still use this syntax outside of React, such as in a standalone utility function.
规则详情
¥Rule Details
React Compiler 需要静态分析你的代码才能应用优化。像 eval 和 with 这样的特性使得我们无法静态地理解代码在编译时的作用，因此编译器无法优化使用它们的组件。
¥React Compiler needs to statically analyze your code to apply optimizations. Features like eval and with make it impossible to statically understand what the code does at compile time, so the compiler can’t optimize components that use them.
无效
¥Invalid
此规则的错误代码示例：
¥Examples of incorrect code for this rule:
// ❌ Using eval in component
function Component({ code }) {
const result = eval(code); // Can't be analyzed
return <div>{result}</div>;
}
// ❌ Using with statement
function Component() {
with (Math) { // Changes scope dynamically
return <div>{sin(PI / 2)}</div>;
}
}
// ❌ Dynamic property access with eval
function Component({propName}) {
const value = eval(`props.${propName}`);
return <div>{value}</div>;
}有效
¥Valid
此规则的正确代码示例：
¥Examples of correct code for this rule:
// ✅ Use normal property access
function Component({propName, props}) {
const value = props[propName]; // Analyzable
return <div>{value}</div>;
}
// ✅ Use standard Math methods
function Component() {
return <div>{Math.sin(Math.PI / 2)}</div>;
}故障排除
¥Troubleshooting
我需要执行动态代码
¥I need to evaluate dynamic code
你可能需要执行用户提供的代码：
¥You might need to evaluate user-provided code:
// ❌ Wrong: eval in component
function Calculator({expression}) {
const result = eval(expression); // Unsafe and unoptimizable
return <div>Result: {result}</div>;
}改用安全的表达式解析器：
¥Use a safe expression parser instead:
// ✅ Better: Use a safe parser
import {evaluate} from 'mathjs'; // or similar library
function Calculator({expression}) {
const [result, setResult] = useState(null);
const calculate = () => {
try {
// Safe mathematical expression evaluation
setResult(evaluate(expression));
} catch (error) {
setResult('Invalid expression');
}
};
return (
<div>
<button onClick={calculate}>Calculate</button>
{result && <div>Result: {result}</div>}
</div>
);
}