React基础知识点与实践

2023-12-18 05:42:31

React是一个用于构建用户界面的JavaScript库。它是一个组件化的库,允许您将UI拆分为单独的可重用组件,并使您能够以声明性方式描述UI。

基础知识

组件

React中的组件是UI的构建块。组件可以是函数组件或类组件。函数组件是一种声明式的组件,接受一些输入(称为“props”),并返回一个描述UI的React元素。类组件是具有状态和生命周期方法的组件。它们也接受props作为输入,并通过调用render()方法返回一个React元素。

JSX

JSX是一种JavaScript语法扩展,允许您在JavaScript代码中编写类似HTML的代码。在React中,您使用JSX来描述UI。JSX元素看起来像HTML标记,但它们是JavaScript对象。当您在JSX中使用{}时,可以在其中添加JavaScript表达式。

例如,以下代码将一个简单的div元素呈现到屏幕上:

const element = <div>Hello, world!</div>;
ReactDOM.render(element, document.getElementById('root'));

Props

props是组件的输入。当您呈现组件时,可以将props传递给它。组件可以通过this.props(对于类组件)或props(对于函数组件)访问它们的props。props是只读的,因此组件不能更改它们。通常,您在组件中使用props来自定义组件的外观和行为。

以下是一个接受props并将它们呈现为文本的函数组件的示例:

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

State

state是组件的内部状态。它是一个可变的对象,可以随着时间的推移而更改。当您更改组件的状态时,React会重新呈现组件并更新UI以反映新状态。通常,您在类组件中使用state。

以下是一个具有状态的类组件的示例:

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

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

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

生命周期方法

生命周期方法是在组件生命周期中调用的方法。它们允许您在组件挂载、更新或卸载时执行操作。例如,componentDidMount()方法在组件挂载到DOM后立即调用。

以下是一个具有生命周期方法的类组件的示例:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <div>{this.state.date.toLocaleTimeString()}</div>;
  }
}

事件处理

在React中处理事件与在常规JavaScript中处理事件类似。您可以将事件处理程序作为属性传递给元素,并在事件发生时调用该处理程序。在处理程序中,您可以使用this.setState()更改组件的状态。

以下是一个处理点击事件的示例:

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

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

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

实践

创建React应用程序

要创建React应用程序,您可以使用create-react-app工具。这个工具将为您设置React开发环境,并提供一些工具来帮助您开发应用程序。

要创建React应用程序,请按照以下步骤操作:

  1. 安装create-react-app(如果尚未安装):npm install -g create-react-app ```

  2. 创建新应用程序:create-react-app my-app cd my-app ```

  3. 运行应用程序:

    npm start 
    

呈现组件

要呈现组件,请在JSX中使用组件标记。例如,以下代码将呈现一个HelloWorld组件:

function HelloWorld() {
  return <div>Hello, world!</div>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

传递props

要将props传递给组件,请将它们作为属性传递。例如,以下代码将向Hello组件传递一个name属性:

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

ReactDOM.render(<Hello name="Alice" />, document.getElementById('root'));

处理事件

要处理事件,请将事件处理程序作为属性传递给元素。在事件处理程序中,您可以使用this.setState()更改组件的状态。例如,以下代码将向Button组件添加一个点击事件处理程序:

?

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

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

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

ReactDOM.render(<Button />, document.getElementById('root'));

使用条件渲染

要根据某些条件呈现不同的内容,请使用条件渲染。您可以使用JavaScript的条件运算符(?)或if语句来实现条件渲染。例如,以下代码将根据isLoggedIn属性呈现不同的内容:

function Greeting(props) {
  if (props.isLoggedIn) {
    return <div>Welcome back!</div>;
  } else {
    return <div>Please sign up.</div>;
  }
}

ReactDOM.render(<Greeting isLoggedIn={false} />, document.getElementById('root'));

使用列表和键

要呈现列表,请使用map()方法将列表中的每个元素映射到React元素。您还需要为列表中的每个元素指定一个唯一的键。键用于帮助React识别列表中的每个元素,并优化更新。例如,以下代码将呈现一个包含三个项目的列表:

const items = ['apple', 'banana', 'orange'];

function List() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(<List />, document.getElementById('root'));

使用样式

要为元素添加样式,请将样式作为JavaScript对象传递给元素的style属性。属性名称应该是驼峰式命名法,例如backgroundColor。例如,以下代码将为Button组件添加一个红色背景色:

class Button extends React.Component {
  render() {
    const style = {
      backgroundColor: 'red',
      color: 'white',
    };
    return <button style={style}>Click me</button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('root'));

文章来源:https://blog.csdn.net/laowang357/article/details/135021416
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。