#React 16 特性的精华和使用指南#

2024-01-03 11:20:42

JSX 语法

JSX（JavaScript XML）是一种语法扩展，它允许您使用 XML 语法编写 JavaScript 代码。JSX 语法可以让您的 React 代码更具可读性，更易于理解。

const element = <div>
  <h1>Hello, world!</h1>
</div>;

函数组件

函数组件是 React 16 中引入的一种新组件类型。函数组件使用纯 JavaScript 函数编写，而无需使用类。这使得函数组件更加简单、易于编写和理解。

const MyComponent = () => {
  return <div>Hello, world!</div>;
};

状态和生命周期

状态是组件的私有数据，它可以随时间的推移而改变。生命周期是组件从创建到销毁过程中经历的各个阶段。React 16 对组件的生命周期进行了改进，使其更加简单和易于理解。

class MyComponent extends React.Component {
  state = {
    count: 0
  };

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

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

Hooks

Hooks 是 React 16 中引入的一种新的 API，它允许您在函数组件中使用状态和生命周期。这使得函数组件更加强大，并使您可以编写更简洁、更可读的代码。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component mounted!');
  }, []);

  return <div>Count: {count}</div>;
};

Refs

Refs 是 React 16 中引入的一种新的 API，它允许您访问组件的 DOM 节点。这对于需要与 DOM 直接交互的情况非常有用。

const MyComponent = () => {
  const ref = useRef();

  useEffect(() => {
    console.log(ref.current);
  }, []);

  return <div ref={ref}>Hello, world!</div>;
};

Context

Context 是 React 16 中引入的一种新的 API，它允许您在组件树中传递数据。这对于需要在多个组件之间共享数据的情况非常有用。

const MyContext = createContext(null);

const MyProvider = (props) => {
  return <MyContext.Provider value={props.value}>{props.children}</MyContext.Provider>;
};

const MyConsumer = () => {
  const value = useContext(MyContext);

  return <div>Value: {value}</div>;
};