React.js作弊表-DEV365 开发者社区

介绍

react.js是一个流行的JavaScript库，用于构建用户界面。无论您是初学者还是经验丰富的开发人员，此React.js作弊表都将帮助您快速参考关键概念，语法和最佳实践。

成分

React应用程序是使用组件构建的，这些组件可重复使用，独立的UI元素。组件可以是功能性的或基于类的功能。

功能组件：

function MyComponent(props) {
  return <div>Hello, {props.name}</div>;
}

基于类的组件：

class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

JSX

JSX是用于描述UI结构的JavaScript的语法扩展。它允许您在JavaScript中编写类似于HTML的代码。

示例：

const element = <h1>Hello, World!</h1>;

道具

props（属性缩写）是对组件的输入。它们允许您将数据从父组件传递到子女组件。

用法：

<MyComponent name="John" />

访问道具：

function MyComponent(props) {
  return <div>Hello, {props.name}</div>;
}

状态

状态用于管理组件的内部数据。它可以使用setState进行修改，从而触发重新渲染。

示例：

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

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

生命周期方法

类组件具有可用于各种目的的生命周期方法：

componentDidMount：将组件添加到DOM。
componentDidUpdate：在组件的道具或状态更改后打电话。
componentWillUnmount：从DOM删除组件之前调用。

示例：

class MyComponent extends React.Component {
  componentDidMount() {
    // Perform setup here
  }

  componentDidUpdate(prevProps, prevState) {
    // Handle updates
  }

  componentWillUnmount() {
    // Clean up resources
  }

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

事件

React使用合成事件，类似于天然DOM事件。使用骆驼属性定义事件处理程序。

示例：

class MyComponent extends React.Component {
  handleClick() {
    // Handle click event
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

钩子

钩子是允许您在功能组件中使用状态和其他React功能的功能。常见的钩子包括useState和useEffect。

示例：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Perform side effects
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

有条件的渲染

条件渲染使您可以根据条件显示或隐藏元素。

示例：

function MyComponent(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Welcome, {props.username}</p> : <p>Please log in</p>}
    </div>
  );
}

列表和钥匙

要渲染项目列表，通过数据映射并为每个项目提供唯一的key道具。

示例：

function MyListComponent(props) {
  const items = props.data.map((item) => (
    <li key={item.id}>{item.name}</li>
  ));

  return <ul>{items}</ul>;
}

形式和受控组件

在React中，形式元素是受控组件的，这意味着其值由React的状态控制。

示例：

class MyForm extends React.Component {
  constructor() {
    super();
    this.state = { inputText: '' };
  }

  handleChange(event) {
    this.setState({ inputText: event.target.value });
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.inputText}
          onChange={(event) => this.handleChange(event)}
        />
      </form>
    );
  }
}

上下文API

上下文API提供了一种通过组件树传递数据的方法，而无需在各个级别手动传递道具。

示例：

const MyContext = React.createContext();

function MyComponent() {
  return (
    <MyContext.Provider value="Hello, Context!">
      <MyChildComponent />
    </MyContext.Provider>
  );
}

function MyChildComponent() {
  const contextValue = React.useContext(MyContext);
  return <div>{contextValue}</div>;
}

裁判

refs用于直接访问DOM或反应元素。可以使用React.createRef()创建它们。

示例：

class MyComponent extends React.Component {
  constructor() {
    super();
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input ref={this.myRef} />;
  }
}

造型

您可以使用CSS类，内联样式或CSS-In-JS库（例如样式组件或情感）应用样式。

示例（内联样式）：

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
};

function MyComponent() {
  return <div style={divStyle}>Styled Div</div>;
}

错误处理

React 16引入了一个错误边界概念，以捕获和处理组件树中的错误。使用componentDidCatch生命周期方法来定义错误处理行为。

示例：

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // Handle the error
  }

  render()

结论

此react.js备忘单提供了对React开发中基本概念和特征的快速参考。 React是一个用于构建用户界面的强大库，了解这些关键概念将帮助您创建动态和响应式Web应用程序。

介绍

目录

成分

JSX

道具

状态