React基础 | 青训营笔记

爱学习的小猿
52 阅读4分钟

React是一个用于构建用户界面的JavaScript库，它是由Facebook开发和维护的。React使用组件的方式来构建应用程序，并且非常灵活和高效，使得更容易管理和维护复杂的UI。

React的基础概念：

1.组件

组件是React中的基本构建块，它可以被看作是一个独立的，可重用的UI单元。每个组件都具有自己的状态(state)，以及一些方法(functions)，用于渲染UI。

在React中使用组件有许多好处，其中之一是可以将应用程序分解成小块的组件，使得更容易阅读和维护代码，同时也更易于复用代码。

在React中创建组件有两种方法：函数式和类式。

函数组件：

函数组件是使用函数声明语法定义的组件，它返回JSX(JavaScript XML)元素。

例如：

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

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

类组件：

类组件是使用ES6类定义的组件，它继承自React.Component类，并覆盖了其中的render方法。

例如：

class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

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

2.属性与状态

组件的状态(state)和属性(props)是React中的两个重要概念。

组件的属性是由其父组件提供的可读属性，用于向组件传递数据。组件的状态是其自身管理的可变数据。

属性(props)是只读的，由其父组件提供，并用于向子组件传递数据。

可以使用如下方法来渲染组件：

<Greeting name="World" />

在组件内部，可以使用props来访问传递进来的属性。

例如：

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

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

状态(state)是内部管理的可变数据。当组件的状态改变时，React将自动更新组件并重新渲染UI。

例如：

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

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

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

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

3.生命周期

React组件具有多个生命周期方法，可以在不同的时期执行不同的操作。

例如：

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

  componentDidMount() {
    console.log('component did mount');
  }

  componentDidUpdate() {
    console.log('component did update');
  }

  componentWillUnmount() {
    console.log('component will unmount');
  }

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

上述代码中，componentDidMount()会在组件渲染后第一次被调用，componentDidUpdate()会在组件更新后被调用，componentWillUnmount()会在组件被卸载前被调用。

4.事件处理

React中的事件处理与原生JavaScript事件处理类似，但是有一些区别。

例如：

class Button extends React.Component {
  handleClick() {
    console.log('click');
  }

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

在上述代码中，onClick函数被传递为一个匿名函数，以便可以在回调函数中访问this。

React中还有一些更复杂的事件处理方式，如事件代理和高阶组件，但这些超出了本篇文章的范围。

5.条件渲染

React中可以使用条件渲染来动态显示组件的一部分。

例如：

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

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

上述代码中，如果isLoggedIn为true，组件将显示“Welcome back!”，否则将显示“Please sign up.”。

可以利用条件渲染来创建动态的UI。

6.列表和键

在React中，可以使用map()函数来渲染列表。

例如：

const numbers = [1, 2, 3, 4, 5];

const list = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{list}</ul>,
  document.getElementById('root')
);

但是，在使用map()函数时，需要为每个列表项添加一个唯一的键(key)属性。

例如：

const numbers = [1, 2, 3, 4, 5];

const list = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

ReactDOM.render(
  <ul>{list}</ul>,
  document.getElementById('root')
);

上述代码中，key属性被设置为数值的字符串形式。

这是必需的，因为React需要key属性来确定哪些元素已经改变，因此它可以针对这些元素进行有效地重渲染操作。

7.表单

React中的表单处理与原生HTML表单处理相似，但存在一些小差别。

例如：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

  render() {
    return (
      <form onSubmit={(e) => this.handleSubmit(e)}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

在上述代码中，handleSubmit()方法是在表单提交时被调用的回调函数。handleChange()方法是在输入字段中的值更改时被调用的回调函数。

总结：

React是一个强大，高效，灵活，易于使用的JavaScript库。它使用组件的方式来构建应用程序，并提供了许多高级功能，如属性，状态，生命周期等。React具有广泛的应用场景，例如基于Web的单页应用程序，原生应用程序等。 想要进行React开发，需要掌握这些React基本概念，这些也是今天我们想想要分享的内容。

avatar
文章
阅读
粉丝