react 学习，核心概念

柔情只为你懂 2023-01-01 14:50 161阅读 0赞

### 一，使用工具链创建： ###

1，创建项目，my-react 是项目名字： npx create-react-app my-react

2，进入项目目录；cd my-app

3，启动项目：npm start

### 二，React 是什么？ ###

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

### 三，元素渲染： ###

import React from "react";
    import ReactDOM from "react-dom";
    
    const element = <h1>Hello,world</h1>;
    ReactDOM.render(element, document.getElementById('root'));

### 四，组件定义（函数组件，class组件）(组件名称必须以大写字母开头。) ###

// 函数组件
    function Welcome(props){
        return <h1>hello,{props.name}</h1>;
    }

// class 组件
    class Welcome extends React.Component{
        render(){
          return (<h1>hello,{this.props.name}</h1>)
     }
    }

**所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。**

### **五，state** ###

**在class组件中的构造函数中可以为this.state附初始值；、**

**六：事件处理**

**事件的命名采用小驼峰，使用JSX语法时需要传入一个函数作为事件处理函数，不是一个字符串；**

<button onclick={ active }> Action Btn </button>

在react中阻止默认行为不能返回false，必须显示的使用 preventDefault , 可能是下面这样的：

在React中，一般不需要使用addEventListener 为已经创建的元素添加事件监听器，只需要在元素渲染的时候添加监听器即可；

class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // 为了在回调中使用 `this`，这个绑定是必不可少的；否则在handleClick中拿不到this
        this.handleClick = this.handleClick.bind(this);
      } 
      handleClick() {
        this.setState(state => ({
          isToggleOn: !state.isToggleOn
        }));
      } 
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    } 
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );