当前位置：首页 > React

手动实现react

2026-01-26 13:18:17React

实现 React 的核心功能

React 的核心功能包括虚拟 DOM、组件化、状态管理和生命周期。以下是一个简化版的手动实现。

虚拟 DOM 和渲染

虚拟 DOM 是一个轻量级的 JavaScript 对象，用于描述真实 DOM 的结构。通过比较新旧虚拟 DOM 的差异，可以高效地更新真实 DOM。

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

渲染函数

渲染函数将虚拟 DOM 转换为真实 DOM，并将其挂载到指定的容器中。

手动实现react

function render(element, container) {
  const dom =
    element.type === 'TEXT_ELEMENT'
      ? document.createTextNode('')
      : document.createElement(element.type);

  const isProperty = key => key !== 'children';
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name];
    });

  element.props.children.forEach(child =>
    render(child, dom)
  );

  container.appendChild(dom);
}

组件化

组件是 React 的核心概念之一。通过函数或类定义组件，可以复用和组合 UI 元素。

function Greeting(props) {
  return createElement('h1', null, `Hello, ${props.name}`);
}

const element = createElement(Greeting, { name: 'World' });
render(element, document.getElementById('root'));

状态管理

状态管理允许组件在内部维护和更新自己的状态，从而触发重新渲染。

手动实现react

let state = { count: 0 };

function setState(newState) {
  state = { ...state, ...newState };
  renderApp();
}

function Counter() {
  return createElement(
    'div',
    null,
    createElement('p', null, `Count: ${state.count}`),
    createElement(
      'button',
      { onClick: () => setState({ count: state.count + 1 }) },
      'Increment'
    )
  );
}

function renderApp() {
  render(createElement(Counter, null), document.getElementById('root'));
}

renderApp();

生命周期

生命周期方法允许在组件的不同阶段执行逻辑，例如挂载、更新和卸载。

class Component {
  constructor(props) {
    this.props = props;
    this.state = {};
  }

  setState(partialState) {
    this.state = { ...this.state, ...partialState };
    renderComponent(this);
  }

  componentDidMount() {}
  componentDidUpdate() {}
  componentWillUnmount() {}
}

function renderComponent(component) {
  const rendered = component.render();
  render(rendered, document.getElementById('root'));
}

示例整合

以下是一个完整的示例，整合了虚拟 DOM、组件化、状态管理和生命周期。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return createElement(
      'div',
      null,
      createElement('p', null, `Count: ${this.state.count}`),
      createElement(
        'button',
        { onClick: () => this.setState({ count: this.state.count + 1 }) },
        'Increment'
      )
    );
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }
}

const element = createElement(App, null);
render(element, document.getElementById('root'));

通过以上步骤，可以实现一个简化版的 React，涵盖核心功能。实际应用中，React 的实现更为复杂，包括优化、事件系统和更多生命周期方法。

标签: react