React组件的创建与state同步异步详解

import React from 'react'
//App为类名 可随意起 继承 React.Component(固定，不可丢掉)
class App extends React.Component{
render(){
  render(){
    //1.return若要回车必须加上（）
    //2.最外层只能有一个标签，不能有兄弟并列
    return (
        <section>
            hello react
            <ul>
                <li>1111</li>
                <li>222</li>
            </ul>
            <div>新的内容111</div>
            <div>新的内容2222</div>
        </section>
    )
}
}
}
export default App       //导出：方便被其他组件引用

React 17之前版本
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./01-base/01-class组件"  //引入时必须大写
ReactDOM.render(<App></App>,document.getElementById("root"))
......................................
React 18版本
import {createRoot} from 'react-dom/client'
import App from "./01-base/01-class组件"    //导入App组件
const container = document.getElementById('root')
const root = createRoot(container);        //App放入的位置
root.render(<App/>)         //单双标签均可以

function App(){
    return (
        <div>
            hello functional component
            <div>111</div>
            <div>2222</div>
        </div>
    )
}
export default App

import React, { Component } from 'react'
class Child extends Component{
    render(){
        return <div>child</div>
    }
}
class Navbar extends Component{
    render(){
        return (
            <div>
                navbr
                <Child></Child>
            </div>
        )
    }
}
function Swiper(){
    return <div>swiper</div>
}
const Tabbar = ()=> <div>tabbar</div>
//以上3种子组件的形式 均可进行嵌套
export default class App extends Component {
  render() {
    return (
      <div>
        <Navbar></Navbar>
        <Swiper></Swiper>
        <Tabbar></Tabbar>
      </div>
    )
  }
}
........................................
import App from "./01-base/03-组件的嵌套"
import {createRoot} from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container);
root.render(<App/>)

  render() {
    var myname = 'xiaoming'
    var isChecked = false
    var obj = {
        backgroundColor:"yellow"，
        fontSize:""//驼峰命名法
    }
    return (
      <div>
        {myname}-{10+20}-岁
        {10>20?"a":"b"}
        <div style={obj}>111</div>
		<div style={style={{textDecoration:isChecked?"line-through":''}}>
		//这里有两个括号，第一个表示我们再要JSX里插入了JS了，第二个是对象的括号
        <div style={{background:"red"}}>222</div>
      </div>
    )
  }

 <div className="active">333</div>
 <div id="myapp">444</div> 

<label htmlFor='username'>用户名：</label>
<input type="text" id="username"></input>

a = 100
render(){
    return(
        <button onClick={ ()=>{
            console.log("click1","如果处理逻辑过多不推荐",this.a);
		} }>add1</button>
    )
}

a = 100
render(){
    return(
         {/* call,apply改变this指向并自动执行函数；bind改变this指向不自动执行 */}
        <button onClick={ this.handleClick2.bind(this)}>add2-不推荐</button>
    )
}
handleClick2(){
    console.log("click2",this.a)
}

a = 100
render(){
    return(
          <button onClick={ this.handleClick3 }>add3-比较推荐</button>
    )
}
handleClick3 = ()=>{
    console.log("click3",this.a)
}

a = 100
render(){
    return(
        {/* 非常推荐 */}
        <button onClick={ ()=>{
            this.handleClick4()  
        } }>add4</button>
        {/* 执行匿名函数后调用handleClick4 */}
    )
}
handleClick4 = ()=>{
    console.log("click4",this.a)
}

<input ref="mytext"></input>
<button onClick={ ()=>{
   console.log("click1",this.refs.mytext.value);
} }>add1</button>

myref = React.createRef()
<input ref={this.myref}></input>
<button onClick={ ()=>{
   console.log("click",this.myref.current.value);
} }>add1</button>

state={
    mytext:"收藏",
    myShow:true
}
render(){
    return(
        <div>
        <h1>welcome</h1>
        <button onClick={()=>{
        	 //this.state.mytext = "取消收藏" 不用直接修改state
        }}>{this.state.mytext}</button>
      </div>
    )
}

import React, { Component } from 'react'
export default class App extends Component {
  // state={
  //   mytext:"收藏",
  //   myShow:true
  // }
  constructor(){
    super()//必须写
    this.state={
      mytext:"收藏",
      myShow:true,
      myName:"xiaoming"
    }
  }
  //  ！！！！以上两种state写法均可以!!!
  render() {
    return (
      <div>
        <h1>welcome--我的名字是{this.state.myName}</h1>

        <button onClick={()=>{
            //this.state.mytext = "取消收藏" 不用直接修改state
            this.setState({
                //mytext:"取消收藏"
                myName:'zhangsan',
                myShow:!this.state.myShow
            })//间接修改state
            if(this.state.myShow){
                console.log("收藏逻辑");
            }else{
                console.log("取消逻辑");
            }
        }}>{this.state.myShow?'收藏':'取消收藏'}</button>
      </div>
    )
  }
}