react笔记

day:3

jsx的使用

jsx绑定属性（如元素都会有title属性，img会有src属性，a元素会有href属性，元素绑定class,使用内联样式style)

 <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义组件
        class App extends React.Component{
            // 组件数据
            constructor(){
                super()
                this.state={
                    message:'Hello World',
                    title:'哈哈哈',
                    imgURL:'https://upen.caup.net/ai_pics_mj/202303/1678119808158776.jpg'
                }
            }
            // 渲染内容
            render(){
                const {message,imgURL,title}=this.state
                return(
                    <div>
                        <h2 title={title}>{message}</h2>
                        <img src={imgURL} />
                        <a href="">百度一下</a>
                    </div>
                )
            }
        }
        // render函数渲染组件
        root.render(<App/>)

     </script>

jsx绑定类:

  // 渲染内容
            render(){
                const {message,isActive}=this.state
                // 绑定类：写法1：通过定义变量使用模板字符串拼接的方式定义类变量值
                // const classname=`abc cba ${isActive?'active':''}`
                // 方法2：
                const classname=['abc','cba']
                if(isActive) classname.push('active')
                return(
                    <div>
                        <h2 className={classname}>{message}</h2>
                    </div>
                )
            }

jsx绑定style属性：绑定对象类型

react组件化

组件化开发

组件化开发的理解：将页面拆分为一个个小的功能模块，然后组合成为一个页面。分而治之。

组件化的分类：类组件和函数组件

类组件的封装（app.js文件中）

import React from "react";

class App extends React.Component{
    // 组件数据：构造函数
    constructor(){
        super()
        this.state={
            message:'App Component'
        }
    }

    // 渲染
    render(){
        const {message}=this.state
        return (
            <div>
                <h2>{message}</h2>
            </div>
        )
    }
}
export default App

函数式组件的封装

// 函数式组件:早期又是展示型组件
function App(props){
    return <h1>App Functional Component</h1>
}
export default App

react生命周期

react生命周期函数的使用： 

不常用的生命周期：

组件通信

1_父传子

父组件

import React, { Component } from 'react'
import MainProductList from './MainProductList'
import Banner from './Banner'

export class main extends Component {
    constructor(){
        super()
        this.state={
            banners:['新歌曲','新MV','新歌单'],
            MainProductList:['推荐商品','热门商品','流行商品']
        }
    }
  render() {
    const {banners}=this.state
    return (
      <div>
        <h2>main</h2>
        <MainProductList/>
        <Banner banner={banners}/>
      </div>
    )
  }
}

export default main

子组件 

import React, { Component } from 'react'

export class Banner extends Component {
    constructor(props){
        super(props)
        console.log('1',props)
        this.state={
            message:'haha'
        }
    }
  render() {
    console.log(this.props)
    const {banner}=this.props
    return (
      <div>
        <h2>{banner}</h2>
      </div>
    )
  }
}

export default Banner

react中的类型校验

import PropTypes from 'prop-types'
Banner.propTypes={
    banner:PropTypes.array.isRequired,
    title:PropTypes.string
}

静态默认类型检测 

2_父子通信：子传父 

/*子传父
 * 1、首先通过在子组件标签上添加一个andClick属性，属性值是一个函数的方式传递andClick方法给子组件
 *  <AddCounter andClick={(count)=>{this.changeCount(count)}}></AddCounter>
 * 2、在子组件中通过this.props.andClick(n)的方式调用这个方法：  
 * AddCounter(n){
    console.log(n)
    this.props.andClick(n)
  }
    3、调用后会在函数内部自动再调用自定义changeCount方法，在这个方法中去修改数据
 * 
 * */ 

父：

import React, { Component } from 'react'
import AddCounter from './05组件通信：子传父/AddCounter'

export class App extends Component {
    constructor(){
        super()
        this.state={
            counter:100
        }
    }
  render() {
    const { counter } = this.state
    return (
      <div>
        <h2>当前计数：{counter}</h2>
        <AddCounter andClick={(count)=>{this.changeCount(count)}}></AddCounter>
      </div>
    )
  }
  changeCount(n){
    this.setState({
        counter:this.state.counter+n
    })
  }
}


export default App

子：

import React, { Component } from 'react'

export class AddCounter extends Component {
    
  render() {
    return (
      <div>
        <button onClick={e=>this.AddCounter(1)}>+1</button>
        <button onClick={e=>this.AddCounter(5)}>+5</button>
        <button onClick={e=>this.AddCounter(10)}>+10</button>
      </div>
    )
  }
  AddCounter(n){
    console.log(n)
    this.props.andClick(n)
  }
}
// 调用函数一定要用this.如this.AddCounter(1)

export default AddCounter