React学习笔记

EvenZhu
57 阅读3分钟 
npx create-react-app my-app
cd my-app
npm start

  • React三大属性state、props、ref

  • 类中定义的方法，都自动开启了严格模式（"use strict"）

  • 对象实例执行方法时，this指针指向了实例对象，方法直接执行时this指针指向undefind

  • 展开语法构造字面量的用法const p1 = {...p};

  • 展开语法在react的jsx中使可以在标签中使用<Person {...p} />，之所有能使用，是因为React和babel的作用

  • 使用#region和#endregion可以将注释内容折叠

  • 高阶函数就是一个函数的参数中传入一个函数或者返回值为一个函数

  • React组件生命周期（旧） image-20230524163900048.png

  • React组件生命周期（新） image-20230524170731372.png

  • React生命周期方法componentWillReceiveProps用于子组件的props刷新，故子组件初次渲染的时候不调用

  • 卸载组件，使用ReactDOM.unmountComponentAtNode()方法触发

  • React脚手架是为了快速创建一个基于React库的项目

  • 使用delete obj.a可以删除obj对象的a属性

  • 父组件向子组件传递数据使用props，子组件向父组件传值使用func

  • 兄弟组件传值使用父组件做状态管理或者使用redux等数据状态管理库

  • 状态管理在哪里，操作方法就在哪里

  • checkbox使用checked属性时，必须设置onchange，否则会导致checkbox无法响应点击

  • 组件目录名称首字母大写，目录内部采用index.文件后缀进行命名

  • 配置代理的方式有以下两种：

    • 在package.json中配置"proxy":"xxx.xxx.xx"；
    • 在src目录下创建文件setupProxy进行代理配置；

  • 连续结构赋值并重命名的写法

const { a:{b:data} } = obj;
console.log("b = ", data);

  • 使用pubsub-js库可以实现消息的发布和订阅，记得在生命周期方法componentWillUnmount中取消订阅

  • querystring库可以很轻松的获取urlencode编码的参数，但是一定要注意urlencode分割方式是a=1&b=2

  • Route路由传输参数的方式有三种：

    • params - path/params（注册路由时需要声明/:paramName， 接收：this.props.match.params）
    • search - ?a=1&b=2（接收：this.props.location.seacrh-字符串形式，需要使用querystring进行参数分割）
    • state - {path: "pathName", state: {a:1, b:2}}（接收：this.props.location.state，不在地址栏展示）

  • 使用路由时，在<Link标签上增加replace就可以实现替换路由地址的效果

  • ES6中推荐使用模版字符串`我的名字是${name}`

  • react-router使用

    • 使用HashRouter的方式进行路由管理时，刷新页面时，state参数会丢失
    • 而BrowserRouter方式不会出现该问题，那是因为BrowserRouter是对H5中history的封装，能够将state数据维护在window.history对象中

  • <></>空标签和都可以当作占位标签， 不过标签可以配置key

  • PureComponent可以过滤未发生变化的状态，防止无效的组件更新，但是存在对象引用地址的判断问题（state对象浅对比 - 对象地址对比），所以使用PureComponent时，不要直接对state对象进行修改，要生成一个新的state对象

  • Error boundary错误边界很重要，不让后代组件的错误扩展向上扩展

static getDerivedStateFromError(error) {
  console.log("子组件出错了", error);
  return { hasError: true }
}
​
componentDidCatch(error, info) {
  // 统计页面的错误，发送错误报告到后端
  console.log(error, info);
}
​
// 错误边界只能接收后代组件生命周期方法内部出现的问题

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”
avatar
文章
阅读
粉丝