【React重点知识与代码案例】

坐等拆迁砸电脑2023-08-08 10:01

React是当前最流行的JavaScript前端框架之一，以下是React重要的知识点和代码案例：

1.JSX语法：JSX是React用于描述UI的语法扩展，它允许在JavaScript代码中编写类HTML的代码。例如：

jsx 复制代码

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

2.组件：在React中，所有UI都是由组件构成的。组件可以是函数组件或者类组件。组件的渲染可以通过return一个JSX元素来实现。例如：

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

3.生命周期：React组件生命周期可以分为3个阶段：挂载、更新和卸载。通过在特定时刻调用生命周期钩子函数，我们可以在这些阶段中执行特定的操作。例如：

jsx 复制代码

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component was mounted!');
  }
  render() {
    return <h1>Hello, world!</h1>;
  }
}

4.状态和属性：在React中，属性（props）是父组件传递给子组件的数据，状态（state）是组件内部管理的数据。通过改变状态，我们可以重新渲染组件。例如：

jsx 复制代码

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

5.条件渲染：在React中，我们可以使用条件语句来控制组件的渲染。例如：

jsx 复制代码

function UserGreeting(props) {
  return <h1>Welcome back, {props.name}!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting name={props.name} />;
  } else {
    return <GuestGreeting />;
  }
}