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

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

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

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

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

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

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

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

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

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中我们可以使用条件语句来控制组件的渲染。例如

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 />;
  }
}