一、React组件

React基于组件化思想，组件是React的精髓所在。React组件有两种形式:函数式组件和类组件。函数式组件简单易用，适合一些无状态组件；类组件则提供了更多的可操作性，可以实现组件状态维护、生命周期控制等功能。

React函数式组件的代码示例:

{`import React from 'react';

function Hello(props) {
  return 
   
Hello {props.name}!
   
;
}

// 使用

   `}

React类组件的代码示例:

{`import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: props.name};
  }

  render() {
    return 
   
Hello {this.state.name}!
   
;
  }
}

// 使用

   `}

二、React虚拟DOM

React的核心机制之一是虚拟DOM。React将组件渲染为虚拟DOM而非直接渲染到页面上，这样可以提高性能和渲染效率。React的虚拟DOM与浏览器的DOM保持一致，可以进行增删改查操作。但由于虚拟DOM没有实际渲染到页面上，所以可以快速进行更新。

React虚拟DOM的代码示例:

{`import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ name: 'React' });
  }

  render() {
    return (
      
   

        
    
Hello {this.state.name}!
        change name
      
   
    );
  }
}

ReactDOM.render(
   , document.getElementById('root'));`}

三、React生命周期

React组件在经历特定的阶段时会调用特定的方法，这些方法称为生命周期方法。React生命周期包括三个阶段:挂载阶段、更新阶段和卸载阶段。在这三个阶段中，React提供了多个生命周期方法，以便开发者能够自由地控制组件的行为。在React的新版本中，有些生命周期方法已经变为非必须方法。

React生命周期的代码示例:

{`import React from 'react';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name };
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return null;
  }

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

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return 
   
Hello {this.state.name}!
   
;
  }
}`}

四、React组件间通信

React组件之间的通信方式有多种，常见的方式包括：父子组件通信、兄弟组件通信、跨级组件通信等。父子组件通信可以通过传递props实现，兄弟组件通信可以通过父组件作为媒介进行通信，跨级组件通信可以通过Context和事件总线等方式实现。

React组件间通信的代码示例:

{`import React from "react";
import ReactDOM from "react-dom";

const EventEmitter = {
  _callbacks: {},
  on(event, callback) {
    if (!this._callbacks[event]) {
      this._callbacks[event] = [];
    }
    this._callbacks[event].push(callback);
  },

  off(event) {
    if (this._callbacks[event]) {
      delete this._callbacks[event];
    }
  },

  emit(event, data) {
    const callbacks = this._callbacks[event];
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }
};

class Sender extends React.Component {
  handleClick() {
    EventEmitter.emit("message", "Hello React");
  }

  render() {
    return (
      
   

        Send Message
      
   
    );
  }
}

class Receiver extends React.Component {
  state = { message: "" };

  componentDidMount() {
    EventEmitter.on("message", message => {
      this.setState({ message });
    });
  }

  componentWillUnmount() {
    EventEmitter.off("message");
  }

  render() {
    return (
      
   

        
    
Message: {this.state.message}
      
   
    );
  }
}

class App extends React.Component {
  render() {
    return (
      
   

        
        
      
   
    );
  }
}

ReactDOM.render(
   , document.getElementById("root"));`}

五、React Redux

React Redux是React的一个状态管理库，它通过集中式的方式管理React组件的状态，解决了多组件之间状态共享问题。Redux核心包括store、reducer和action三个部分，store是Redux中唯一的数据源，reducer是Redux中数据变化的处理方式，而action则是数据变化的描述方式。

React Redux的代码示例:

{`import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// reducer
function counter(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// store
const store = createStore(counter);

// action
function increment() {
  return { type: 'INCREMENT' };
}

function decrement() {
  return { type: 'DECREMENT' };
}

// component
class App extends React.Component {
  render() {
    return (
      
   

        
    
Count: {this.props.count}
        +
        -
      
   
    );
  }
}

// redux connect
const mapStateToProps = state => ({ count: state.count });
const mapDispatchToProps = { increment, decrement };
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

// provider
class Counter extends React.Component {
  render() {
    return (
      
   
        
    
      
   
    );
  }
}

export default Counter;`}