• react 初体验

    react笔记

    创建一个项目

    npm install -g create-react-app // 全局安装脚手架
create-react-app  react-01 // 新建一个项目
npm start

    • 1
    • 2
    • 3

    快捷定义组件

    在这里插入图片描述

    • 安装组件后，快捷命令 rcc ：类式组件 rfc：函数式组件

    axios开启代理

    • 在package.json中新增
    {
	proxy:"http:192.168.2.107:8080"
}

    • 1
    • 2
    • 3

    如何开启服务运行项目打包后的dist包

    • 全局安装 serve npm i serve -g
    • serve 文件夹名 serve dist

    父子组件传值

    • 父传子：子组件this.props接收
    • 子传父：父组件定义方法接收参数，将方法传给子组件；子组件在合适时机调取改方法并传参
    // 父组件
class App extends Component {
  addList = (item) => { // 1.定义方法
  }
  render() {
    return (
      <div>      
          <Add addList={this.addList} />   // 2.传递方法     
      </div >
    );
  }
}
// 子组件
export default class Add extends Component {
  add = (e) => {
    if (e.keyCode == 13) {
      this.props.addList(e.target.value)  // 3.调用方法
    }
  }
  render() {
    return (
      <div>
        <input type="text" placeholder='新增' onKeyUp={this.add} />
      </div>
    )
  }
}

    • 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

    任意组件通信——订阅发布机制

    • 安装库 npm i pubsub-js
    • 需要接收信息的组件订阅消息
    import PubSub from 'pubsub-js'

export default class Foot extends Component {
  componentDidMount() { // 组件渲染完成创建订阅 （消息名字，收到消息回调（消息名字，数据））
    this.sub = PubSub.subscribe('getData', (name, data) => {
      console.log(name, data)
    })
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.sub) // 组件卸载前取消订阅
  }
  render() {
    return (
      <div></div>
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 发送数据的组件在合适实际发布订阅消息
    import PubSub from 'pubsub-js'
export default class Add extends Component {
  add = (e) => {
    PubSub.publish('getData', e.target.value) // 发布订阅消息
  }
  render() {
    return (
      <div>
        <input type="text" placeholder='新增' onKeyUp={this.add} />
      </div>
    )
  }
}

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

    spa 单页面应用（vue、react）

    在这里插入图片描述

    git提交代码报错

    报错信息：Git: husky ＞ pre-commit (node v14.16.1)
    错误原因：项目中使用了husky, 这个会在你git commit的时候先执行里面的严谨模式, 对代码进行检查, 有error就会终止提交
    git commit前检测husky与pre-commit

    • 解决方法
     git commit -m "提交页面备注 绕过eslint检查" --no-verify

    • 1

    table添加序号

     	{
      title: '序号',
      render: (text, record, index) => {
        return (
          `${(searchParam.pageIndex || 1 - 1) * (searchParam.pageSize) + (index + 1)}`//当前页数减1乘以每一页页数再加当前页序号+1
        )
      }
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    普通方法中this的指向

    • 方法里this指向window
    • 但是当开启局部严格模式，this就指向undefined
    • class类中方法自动开启严格模式，所以类中的方法如果不是实例调用，this是undefined；若是实例调用则指向实例对象
    • bind可以改变this指向为传进去的参数，并且返回一个新的函数
    function qu() {
  console.log('this', this)
}
qu()  // 打印 undefined
let qu1 = qu.bind(window) // 改变了this指向
qu1()  // 打印 window对象

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    class类中可以写什么——赋值语句

    • constructor构造器
    • 方法
    • 变量赋值 例如 a = 1
    class Car {
  a = 1, //直接变量赋值，代表给实例添加一个属性
}
const car = new Car()
console.log(22, car) //{a:1}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    …展开运算符使用

    • 只能展开数组，不能展开对象
    • 可用于合并数组
    let arr1 = [1, 2, 3, 4]
let arr2 = [6, 7, 8, 9]
console.log(...arr1) // 1 2 3 4
console.log([...arr1, ...arr2]) //合并数组 [1, 2, 3, 4, 6, 7, 8, 9]

    • 1
    • 2
    • 3
    • 4
    • 可用于接收所有参数为数组
    function sum(...v) {
  console.log(v) //[1, 2, 3, 4]
  return v.reduce((s, c) => {
    return s + c
  })
}
let ss = sum(1, 2, 3, 4)
console.log(ss) // 10

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 可用于克隆一个对象，类似深拷贝，并且可以修改或添加新属性
    • 可用于合并对象，属性名相同的会被覆盖，不同的会新增
    let obj1 = {
  name: 'rose',
  age: 18
}
let obj2 = {
  name1: 'jack',
  age1: 13
}
let obj = { ...obj1 }
console.log(obj)  // 类似深拷贝 {name: 'rose', age: 18}
console.log({ ...obj1, name: 'sunny', sex:'1' })  // 克隆并修改属性 {name: 'sunny', age: 18 , sex:'1'}
console.log({ ...obj1, ...obj2 })  // 合并对象 {name: 'rose', age: 18, name1: 'jack', age1: 13}

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

    对象的键名取变量 【】

    let obj = { name:'张三' }  // {name: '张三'}
let name = 'key';
obj = { [name] : '张三'}  // obj[name] = '张三'
console.log(obj)  // {key: '张三'}

    • 1
    • 2
    • 3
    • 4

    连续解构赋值并取别名

    	let obj = {
      a: { b: 1 }
    }
    let { a: { b } } = obj  //连续解构，直接拿到b
    console.log(b) 
    let { a: { b: data } } = obj  // 变量取别名  变量：别名
    console.log(data)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    虚拟DOM中key 的作用

    • key 是虚拟 DOM 对象的标识，可提高页面更新渲染的效率。
    • 当状态中的数据发生变化时，React 会根据新数据生成新的虚拟 DOM ，接着对新旧虚拟 DOM 进行 Diff 比较，规则如下：

    旧虚拟 DOM 找到和新虚拟 DOM 相同的 key： 若内容没变，直接复用真实 DOM；若内容改变，则生成新的真实 DOM，替换页面中之前的真实DOM
    旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key：根据数据创建新的真实 DOM ，渲染到页面

    使用 index 作为 key 可能引发的问题：

    • 若对数据进行逆序添加、逆序删除等破坏顺序的操作，会进行没有必要的真实 DOM 更新。界面效果没问题，但效率低下。
    • 如果结构中包含输入类的DOM（如 input 输入框） ，则会产生错误的 DOM 更新。
    • 若不存在对数据逆序添加、逆序删除等破坏顺序的操作，且没有输入类DOM，使用index则没有问题。
      在这里插入图片描述

    在input上绑定enter键回车事件，并清空input

    • 绑定onKeyUp方法
    • 在参数e中，e.keyCode代表每个键的键码，e.target.value代表输入的值
    • 单选框的值是 e.target.checked
    export default class Add extends Component {
  add = (e) => {
    console.log(e.target.value, e.keyCode) //  13
    e.target.value = '' // 清空input
  }
  render() {
    return (
      <div>
        <input type="text" placeholder='新增' onKeyUp={this.add} />
      </div>
    )
  }
}

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

    根据id匹配来修改、删除、新增数组，统计数组选中的个数

    state = {
    list: [
      { id: 1, value: '吃饭', checked: true },
      { id: 2, value: '睡觉', checked: false },
      { id: 3, value: '打豆豆', checked: false }
    ]
  }
  addList = (item) => {
    let { list } = this.state
    this.setState({
      list: [{ id: list.length + 1, value: item, checked: false }, ...list] // 1.数组前边新增一条数据
    })
  }
  delList = (id) => {
    let { list } = this.state
    this.setState({
      list: list.filter(item => item.id != id) // 2.删除数组某一项，根据id匹配
    })
  }
  changeList = (id, checked) => {
    let { list } = this.state
    this.setState({
      list: list.map(item => {   // 3. 修改数组某一项的checked属性值，根据id匹配
        if (item.id === id) {
          return { ...item, checked }  //原理：合并对象，属性名相同会覆盖
        } else {
          return item
        }
      })
    })
  }
  getNum = () => {
  	 let { list } = this.state
	 let num = list.reduce((pre, item) => {  // 4.统计选中的个数，reduce（回调（累计值,当前项）, [初始值]）
      	return pre + (item.checked ? 1 : 0)
     }, 0)
     return num
 }

    • 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

    数组的循环some、find、filter、map比较

    • some 判断数组这种是否有符合条件的项
    • find 返回第一个符合条件的项
    • filter 返回所有符合条件的的项集合
    [1,2,3,4].some(item=>item>2)  // true
[1,2,3,4].find(item=>item>2)  // 3
[1,2,3,4].filter(item=>item>2)  // [3, 4]
[{type:'ss1',id:1},{type:'ss2',id:2},{type:'ss3',id:3}].map(item=>item.type) // ['ss1', 'ss2', 'ss3']

    • 1
    • 2
    • 3
    • 4

    只有数组的for循环和对象的 for…in 循环中使用 break 结束循环，使用continue跳出本次循环，其他循环方法均不行

  • 相关阅读:
    c语言文件操作(9000字详解！！！)
    go字符串拼接方式及性能比拼
    [论文|实验]HRNet
    [题] 最长连续不重复子序列
    ＜C++＞学习：类与对象
    k8s之etcd
    docker-compose安装mysql主流版本及差异
    【华为OD机试真题 JS】最远足迹
    甲骨文真的要开放Java EE？
    获取本地缓存数据修改后，本地缓存中的值也修改问题
  • 原文地址：https://blog.csdn.net/weixin_43848576/article/details/127787147