React Live 使用指南：实时编辑与预览React组件的艺术-优快云博客

React Live 使用指南：实时编辑与预览React组件的艺术

react-live A flexible playground for live editing React components 项目地址: https://gitcode.com/gh_mirrors/re/react-live

什么是React Live

React Live是一个强大的工具，它允许开发者在浏览器中实时编辑React代码并立即看到渲染结果。这种即时反馈机制非常适合用于创建交互式文档、教学演示或快速原型开发。

核心渲染能力

React Live可以处理多种React代码形式：

基础JSX元素：如<strong>Hello World!</strong>这样的简单元素
无状态函数组件：例如() => <strong>Hello World!</strong>
使用Hooks的函数组件：支持React的所有现代特性
类组件：完整的ES6类组件定义

两种代码执行模式

1. 内联模式（默认）

这是最简单的使用方式，代码会自动执行并返回渲染结果：

<LiveProvider code={`<strong>Hello World!</strong>`}>
  <LivePreview />
</LiveProvider>

2. 非内联模式（noInline）

启用noInline属性后，你可以编写更复杂的命令式代码，并通过显式调用render()方法来输出结果：

<LiveProvider 
  noInline
  code={`
    let count = 0;
    const increment = () => {
      count++;
      render(<button onClick={increment}>Clicked {count} times</button>);
    };
    increment();
  `}
>
  <LivePreview />
</LiveProvider>

作用域(Scope)管理

React Live默认只注入React到作用域中，但你可以通过scope属性扩展可用变量：

import styled from 'styled-components';

const scope = {
  styled,
  specialData: { message: '来自作用域的数据' }
};

<LiveProvider 
  code={`
    const Box = styled.div\`
      padding: 20px;
      background: #f0f0f0;
    \`;
    render(<Box>{specialData.message}</Box>);
  `}
  scope={scope}
  noInline
>
  <LivePreview />
</LiveProvider>

组件集成实践

你可以将现有组件导入到React Live环境中：

import { CustomButton } from './components';

const scope = { CustomButton };

<LiveProvider 
  code={`<CustomButton>点击我</CustomButton>`}
  scope={scope}
>
  <LivePreview />
</LiveProvider>

Hooks使用技巧

在React Live中使用Hooks有两种方式：

1. 通过React对象调用

() => {
  const [value, setValue] = React.useState('默认值');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

2. 通过作用域注入

import { useState } from 'react';

const scope = { useState };

<LiveProvider 
  code={`
    const [value, setValue] = useState('默认值');
    return <input value={value} onChange={e => setValue(e.target.value)} />;
  `}
  scope={scope}
>
  <LivePreview />
</LiveProvider>