该图来自React 官方中文文档 – 用于构建用户界面的 JavaScript 库官方logo

目录

了解

在App.js中的事件列表渲染：

在App.js中的表单绑定：

总结：

了解

元素是构成 React 应用的最小砖块。

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

React 构建的应用通常只有单一的根 DOM 节点，如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素

在App.js中的事件列表渲染：

import React, { Component } from 'react'

export default class App extends Component {
    // 数据
    constructor(props){
        super(props)
        this.state={
            msg:"大萨达是<i>ad</i> adasdsdsddasd",
            isLog:false,
            list:["vue","react","jquery","js"]
        }
    }

sayHi=(msg="asd")=>{
    alert(msg)
}

    // sayHi(msg="我爱中国"){
    //     alert(msg)
    // }

    render() {
        return (
            <div>
                {/* 更新数据 */}
                <button onClick={()=>{
                    this.setState({isLog:!this.state.isLog},()=>{
                        console.log("切换回调");
                    });
                }}>切换</button> <br />

                {/* 事件渲染 */}
                <button onClick={this.sayHi.bind(this,"我爱你bind传参")}>问候-传参</button>
                <button onClick={()=>{this.sayHi("我喜欢你")}}>问候-传参</button>
                <button onClick={this.sayHi}>问候-许愿</button>
                <button onClick={()=>alert("2022新年快乐！")}>问候</button>

                {/* 列表渲染 */}
                
                {this.state.list.map(item=><p key={item}>{item}</p>)}
                
                {/* //文本渲染 */}
                {this.state.mag}
                <div dangerouslySetInnerHTML={{__html:this.state.msg}}></div>
<hr />
                {/* 条件渲染 */}
                {this.state.isLog?<p>欢迎你</p>:<p>请登录</p>}
                {/* 条件 */}
                {this.state.isLog&&<p>中午</p>}
            </div>
        )
    }
}

//类组件

在App.js中的表单绑定：

import React, { Component, createRef } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "你家啊asd",
    };
    //创建一个dom引用
    this.inpRef = createRef();
  }

  getVal = () => {
    //获取表单值
    alert(this.inpRef.current.value);
  };
changeMsg=(e)=>{
    this.setState({msg:e.target.value})
}


  render() {
    return (
      <div>
        {/* 受控表单表单双向绑定 */}
        <p>{this.state.msg}</p>
        <input type="text" value={this.state.msg} onChange={this.changeMsg} />
        <input type="text" value={this.state.msg} onChange={this.changeMsg.bind(this)} />
        <input type="text" value={this.state.msg} onChange={e=>this.changeMsg(e)} />

        {/* 非受控表单 */}
        <br />
        <input type="text" ref={this.inpRef} />
        <button onClick={this.getVal}>获取值</button>
      </div>
    );
  }
}

export default App;

总结：