• React(Js)学习

    React(Js)学习

    网络请求的封装

    //泛型T根据json格式规定相应的返回数据类型
async function request<T>(method: string, url: string, data?: unknown) {
  const option: RequestInit = {
    method
  }
  if (data) {
    option.headers = {
      'Content-Type': 'application/json; charset=utf-8'
    }
    option.body = JSON.stringify(data)
  }
  const res = await fetch(url, option)
  const json: T = await res.json()
  return json
}

export function get<T>(url: string) {
  return request<T>('GET', url)
}

export function post<T>(url: string, data?: unknown) {
  return request<T>('POST', url, data)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    列表渲染

    注意map遍历数组渲染列表时如果箭头后面有{ } 就要使用return返回

    function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(（item,index）=> <li key={index}>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    组件传参

    传参的话绑定函数时前面要加箭头函数包裹

    // 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e,msg) => {
    console.log('事件被触发了',e,msg)
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>click me!</button>
  )
}

// 类组件
class HelloC extends React.Component {
  // 定义事件回调函数
  clickHandler = (e,msg) => {
    console.log('事件被触发了')
  }
  render () {
    return (
      // 绑定事件
      <button onClick={(e) => {this.clickHandler(e,"this is a message")}}>click me!</button>
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    // 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
      //超链接将不在转跳
    e.preventDefault() 
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <a href="http://www.baidu.com/" onClick={clickHandler}>百度</a>
  )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    组件状态

    • 通过class的实例属性state来初始化

    • state的值是一个对象结构，表示一个组件可以有多个数据状态

    class Counter extends React.Component {
  // 定义数据
  state = {
    count: 0
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    状态的修改不要直接修改状态的值，而是基于当前状态创建新的状态值

    state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
this.setState({
    //简单类型修改
    count: this.state.count + 1
    //数组修改
    list: [...this.state.list, 4],
    //对象修改
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
    //删除(筛选出不为2的值)
    list:this.state.list.filter(item => !==2)
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    表单处理

    import React from 'react'

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}


function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    uuid

    生成id的包

    npm add uuid  //下载包

    • 1
    import {v4 as uuid} from 'uuid' //导入

    • 1
    id:uuid(),  //给id属性生成一个独一无二的值

    • 1

    组件传值

    父子组件传值

    通过props实现

    • props是只读对象（readonly），根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改
    • props可以传递任意数据（数字、字符串、布尔值、数组、对象、函数、JSX）
    //父传子 通过props关键字传递
import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
      {props.list.map(item => <p key={item}>{item}</p>)}
      {props.user.name}
      {props.child}
      <button onClick={props.getMsg}>触发父组件传来的函数</button>
    </div>
  )
}
// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message',
    list: [1,2,3,4],
    user:{
      age:16,
      name:"cyt"
    },
  
  }
  getMsg = () => {
    console.log('父组件中的函数')
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon
          msg={this.state.message}
          list={this.state.list}
          user={this.state.user}
          getMsg={this.getMsg}
          child={<span>这是父组件传来的span</span>}
           />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    请添加图片描述

    props解构赋值

    // 函数式子组件
function FSon(props) {
  console.log(props)
  const {msg,list,user,child,getMsg} = props
  return (
    <div>
      子组件1
      {props.msg}
      {props.list.map(item => <p key={item}>{item}</p>)}
      {props.user.name}
      {props.child}
      <button onClick={props.getMsg}>触发父组件传来的函数</button>
    </div>
  )
}
或者
// 函数式子组件
function FSon({msg,list,user,child,getMsg}) {
  const {msg,list,user,child,getMsg} = props
  return (
    //......
  )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    子传父
        import React from 'react'
     
     // 子组件
     function Son(props) {
       const {getSonMsg} = props
       return (
         <div>
           <button onClick={() => getSonMsg('这里是来自于子组件的数据')}>click</button>
         </div>
       )
     }
     
     class App extends React.Component {
       //准备一个函数传递给子组件
       getSonMsg = (sonMsg) => {
         console.log(sonMsg);
       }
       render() {
         return (
           <div>
             <div>父组件</div>
             <Son
               getSonMsg={this.getSonMsg}
             />
           </div>
         )
       }
     }
     
     export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    兄弟组件传值

    本质是子传父 父再传给另一个子

         import React from 'react'
     
     // 子组件A
     function SonA(props) {
       return (
         <div>
           SonA
           {props.msg}
         </div>
       )
     }
     // 子组件B
     function SonB(props) {
       return (
         <div>
           SonB
           <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
         </div>
       )
     }
     // 父组件
     class App extends React.Component {
       // 父组件提供状态数据
       state = {
         message: 'this is message'
       }
       // 父组件提供修改数据的方法
       changeMsg = (newMsg) => {
         this.setState({
           message: newMsg
         })
       }
     
       render() {
         return (
           <>
             {/* 接收数据的组件 */}
             <SonA msg={this.state.message} />
             {/* 修改数据的组件 */}
             <SonB changeMsg={this.changeMsg} />
           </>
         )
       }
     }
     
     export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    向下层组件传值（子 孙 等）

    使用context实现
    创建Context对象 导出 Provider 和 Consumer对象

           const { Provider, Consumer } = createContext()

    • 1

    使用Provider包裹根组件提供数据

           <Provider value={this.state.message}>
           {/* 根组件 */}
       </Provider>

    • 1
    • 2
    • 3

    需要用到数据的组件使用Consumer包裹获取数据

           <Consumer >
           {value => /* 基于 context 值进行渲染*/}
       </Consumer>

    • 1
    • 2
    • 3

    使用

         import React, { createContext }  from 'react'
     
     // 1. 创建Context对象 
     const { Provider, Consumer } = createContext()
     
     
     // 3. 消费数据
     function ComC() {
       return (
         <Consumer >
           {value => <div>{value}</div>}
         </Consumer>
       )
     }
     
     function ComA() {
       return (
         <ComC/>
       )
     }
     
     // 2. 提供数据
     class App extends React.Component {
       state = {
         message: 'this is message'
       }
       render() {
         return (
           <Provider value={this.state.message}>
             <div className="app">
               <ComA />
             </div>
           </Provider>
         )
       }
     }
     
     export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    children属性

    表示该组件的子节点，只要组件内部有子节点，props中就有该属性，可以传递普通文本，普通标签元素，函数，jsx

    import React from 'react'

// 子组件
function Son({children}) {
  return (
    <div>
      {children}
    </div>
  )
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div>父组件</div>
        <Son>
          <div>111111</div>
        </Son>
      </div>
    )
  }
}

export default App

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    请添加图片描述

  • 相关阅读:
    拿到这份Java面试文档“狂刷”2周，成功拿到阿里P7+的offer
    金融机构系统性风险分析(Domestic+MES模型)200701-202012
    Spring Security（5）
    Java攻略集合之基础语法
    @Zabbix配置邮箱告警及钉钉告警
    【深度学习的未来：探索无监督学习的潜力】
    Java的自动装箱与拆箱详细分析
    R语言使用dplyr包右连接两个dataframe数据（right join）
    clazzToJsonDefault java 实体 to json 字符串
    多数据源配置
  • 原文地址：https://blog.csdn.net/m0_46527751/article/details/125572731