import React from 'react'
//App为类名 可随意起 继承 React.Component(固定，不可丢掉)
class App extends React.Component{
render(){
  render(){
    //1.return若要回车必须加上（）
    //2.最外层只能有一个标签，不能有兄弟并列
    return (
        

            hello react
            

                
1111
                
222
            
            
新的内容111
            
新的内容2222
        
    )
}
}
}
export default App       //导出：方便被其他组件引用

React 17之前版本
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./01-base/01-class组件"  //引入时必须大写
ReactDOM.render(,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()         //单双标签均可以

function App(){
    return (
        

            hello functional component
            
111
            
2222
        
    )
}
export default App

import React, { Component } from 'react'
class Child extends Component{
    render(){
        return 
child
    }
}
class Navbar extends Component{
    render(){
        return (
            

                navbr
                
            
        )
    }
}
function Swiper(){
    return 
swiper
}
const Tabbar = ()=> 
tabbar
//以上3种子组件的形式 均可进行嵌套
export default class App extends Component {
  render() {
    return (
      

        
        
        
      
    )
  }
}
........................................
import App from "./01-base/03-组件的嵌套"
import {createRoot} from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container);
root.render()

  render() {
    var myname = 'xiaoming'
    var isChecked = false
    var obj = {
        backgroundColor:"yellow"，
        fontSize:""//驼峰命名法
    }
    return (
      

        {myname}-{10+20}-岁
        {10>20?"a":"b"}
        111
		
		//这里有两个括号，第一个表示我们再要JSX里插入了JS了，第二个是对象的括号
        222

????1. {}里面为js表达式，不支持语句

????2. 行内样式需要写入一个样式对象如上面的obj，这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链js文件中

class样式

• css文件中写入样式

• 导入css文件

• 为元素添加class类名（class需要写成className,在写类js代码，会受到js规则的存在，而class为关键字）

 333
 444

⭐️⭐️ ⭐️ class ==> className，for ===> htmlFor(label) ⭐️⭐️ ⭐️

用户名：

事件处理

事件绑定

????render内使用箭头函数— 直接使用this

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

箭头函数作用域为App，所以this直接为App

????render内调用函数，函数普通函数 – 使用bind改变this指向

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

render内刚开始 this 为 undefined，通过使用 bind 将this指向改为App

????render内调用函数，函数箭头函数 – 直接使用this

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

????render内使用箭头函数调用函数 – 直接使用this

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

onClick里面的this为App，所以当handleClick被调用时不论是箭头函数还是普通函数this均和调用者相同都为App

事件的参数传递

????1. 在render里调用方法的地方外面包一层箭头函数

????2. 在render里通过this.handleClick.bind(this,参数)来传递

????3. 通过event传递

ref的应用

????给标签设置ref=“mytext”

{
   console.log("click1",this.refs.mytext.value);
} }>add1

通过 this.refs.mytext，ref可以获取到应用的真实dom

???? 给组件设置ref="username

通过这个获取 this.refs.username ，ref可以获取到组件对象

????新的写法（严格模式下）

myref = React.createRef()

{
   console.log("click",this.myref.current.value);
} }>add1

访问 this.myref.current

状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说组件自己维护，使用状态的目的就是为了在不同的状态下是组建的显示不同（自己管理）

定义state

state={
    mytext:"收藏",
    myShow:true
}
render(){
    return(
        

        
welcome
        {
        	 //this.state.mytext = "取消收藏" 不用直接修改state
        }}>{this.state.mytext}
      
    )
}

this.state是纯js对象，在vue中，data属性利用Object.defineProperty处理过的，更改data的数据的时候回出发数据的getter和setter,但是React中没有这样的处理，如果直接更改，react无法得知，所以需要使用setState间接修改

setState

myShow存放在实例的state对象当中，组件的render函数内，会根据组件的state的中的myShow不同 显示“取消”或“收藏”

可以一次更新多个状态

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 (
      

        
welcome--我的名字是{this.state.myName}

        {
            //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?'收藏':'取消收藏'}
      
    )
  }
}

setState同步异步

• setState处在同步的逻辑中，异步更新状态，更新真实dom

• setState处在异步的逻辑中，同步更新状态，同步更新真实dom

• setState接受第二个参数，第二个参数回调函数，状态和dom更新后就会被触发

补充-React面试题

react事件绑定和普通事件绑定的区别

React并不会真正的绑定事件到每一个具体的《》元素上，而是采用事件代理的模式，绑定在根节点身上

Event对象

和普通浏览器一样，事件handler会被自动传入一个event对象，这个对象和普通的浏览器event对象所包含的方法和属性基本一致。不同的是React中的event对象并不是浏览器提供的，而是自己内部构建的。他同样具有event.stopPropagation、event.preventDefalut这种常用方法