- 前言我们日常开发使用的是React框架，主要采用JSX写法，而classnames与JSX十分般配，组合使用效果极佳，可以实现class的动态绑定。接下来，通过对 classnames 源码的阅读，来进一步了解classnames出现的契机及其用法。听说你叫 className讲 classnames 之前，科普一点关于它「兄弟」 className 的知识点。万物皆有源之 JSX众所周知，... 前言我们日常开发使用的是React框架，主要采用JSX写法，而classnames与JSX十分般配，组合使用效果极佳，可以实现class的动态绑定。接下来，通过对 classnames 源码的阅读，来进一步了解classnames出现的契机及其用法。听说你叫 className讲 classnames 之前，科普一点关于它「兄弟」 className 的知识点。万物皆有源之 JSX众所周知，...
- 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下：组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或PureComponent实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。 二、参数传递React Native版本... 一、前言ReactNative组件分为类组件和函数组件。实现ReactNative自定义组件基本流程如下：组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或PureComponent实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。 二、参数传递React Native版本...
- 一、前言在开发react-native App时，相信大家都遇到过这样的问题：当用户设置了系统的字体大小之后，导致APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？今天这篇文... 一、前言在开发react-native App时，相信大家都遇到过这样的问题：当用户设置了系统的字体大小之后，导致APP布局紊乱，甚至有些内容会被切掉/隐藏，这对于用户来讲，是非常不好的用户体验。那为什么会出现这种情况呢？原因是我们在开发的时候，布局的前提是系统的字体大小设置为默认大小，所以只能保证在系统字体大小正常的情况下，我们的布局是友好的，那么，我们应该如何解决这个问题呢？今天这篇文...
- 一、安装npm i react-native-linear-gradientreact-native link react-native-linear-gradient 二、属性介绍 2.1 colors默认情况下，渐变色的方向是从上向下的。<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{heigh... 一、安装npm i react-native-linear-gradientreact-native link react-native-linear-gradient 二、属性介绍 2.1 colors默认情况下，渐变色的方向是从上向下的。<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} style={{heigh...
- 一、前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点... 一、前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，需要借助Touchablexxx组件来包裹视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应用户的点击事件。TouchableWithoutFeedback：响应用户的点击事件，如果你想在处理点...
- 一、前言Hook 是 React 16.8.0 的新增特性，React Native 0.59及以上版本支持 Hook。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。请注意，要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package，Hook 将... 一、前言Hook 是 React 16.8.0 的新增特性，React Native 0.59及以上版本支持 Hook。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。请注意，要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package，Hook 将...
- 一、文件加载顺序React调用顺序: index.html → index.js → components/组件一般项目创建好后会有二个文件：index.html、index.js。my-app文件夹下的public/index.html 和src/index.js的源码，可以在这里编写项目代码，但是注意 public/index.html 是启动http服务器的首页，src/index... 一、文件加载顺序React调用顺序: index.html → index.js → components/组件一般项目创建好后会有二个文件：index.html、index.js。my-app文件夹下的public/index.html 和src/index.js的源码，可以在这里编写项目代码，但是注意 public/index.html 是启动http服务器的首页，src/index...
- 一、前言React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。 二、UI 组件只负责 UI 的呈现，不带有任何业务逻辑；没有状态（即不使用this.state这个变量）；所有数据都由参数（this.props）提供；不使用任何 Redux 的 API； 三、容器组件负责管理数据和业务... 一、前言React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。 二、UI 组件只负责 UI 的呈现，不带有任何业务逻辑；没有状态（即不使用this.state这个变量）；所有数据都由参数（this.props）提供；不使用任何 Redux 的 API； 三、容器组件负责管理数据和业务...
- 一、前言在《React进阶（七）：props属性》博文中，主要讲解了props的应用场景及应用示例。本文主要梳理state属性的应用场景及应用实例。 二、React 渲染过程React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态间的切换，然后渲染 UI，让用户界面和数据保持一致。React 中只需更新组件的 state，然后根据新的 state ... 一、前言在《React进阶（七）：props属性》博文中，主要讲解了props的应用场景及应用示例。本文主要梳理state属性的应用场景及应用实例。 二、React 渲染过程React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态间的切换，然后渲染 UI，让用户界面和数据保持一致。React 中只需更新组件的 state，然后根据新的 state ...
- 一、前言在组件整个生命周期中，随着组件的props或者state发生改变，其DOM表现也会发生相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。 二、生命周期图例一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。React应用中，组件加载顺序及生命周期如下图所示： 2.1 constructor( )constructor是ES6对类的默认方法，通过 ... 一、前言在组件整个生命周期中，随着组件的props或者state发生改变，其DOM表现也会发生相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。 二、生命周期图例一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。React应用中，组件加载顺序及生命周期如下图所示： 2.1 constructor( )constructor是ES6对类的默认方法，通过 ...
- 一、前言在《React进阶（四）：路由介绍》博文中，介绍了React路由相关知识，在实际项目开发过程中，路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定，故需要导航守卫来完成这一事项。在实现react-router路由拦截之前，先看一下vue路由拦截是如何使用的，都做了哪些事情。正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 二、全局守卫可以使... 一、前言在《React进阶（四）：路由介绍》博文中，介绍了React路由相关知识，在实际项目开发过程中，路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定，故需要导航守卫来完成这一事项。在实现react-router路由拦截之前，先看一下vue路由拦截是如何使用的，都做了哪些事情。正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 二、全局守卫可以使...
- 写在前面的话：事务不多或者不紧急，故空闲时间用来充电，鉴于之前自己一直在做Vue开发，现在此基础上接触学习React。大致的学习思路参照Vue学习路线，边学习边总结边实践，形成学习闭环。万事皆有法则，第一次应用React，首先需要环境搭建：Node.js（用于执行js）、npm（包管理器）。具体安装方法请参考博文《Vue进阶（一）：Vue学习资料汇总》中有关环境搭建部分。安装脚手架工具：cr... 写在前面的话：事务不多或者不紧急，故空闲时间用来充电，鉴于之前自己一直在做Vue开发，现在此基础上接触学习React。大致的学习思路参照Vue学习路线，边学习边总结边实践，形成学习闭环。万事皆有法则，第一次应用React，首先需要环境搭建：Node.js（用于执行js）、npm（包管理器）。具体安装方法请参考博文《Vue进阶（一）：Vue学习资料汇总》中有关环境搭建部分。安装脚手架工具：cr...
- 一、前言继前期iOS由于移动设备内存不足导致页面白屏问题之后，（详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》）又发现APP在iOS系统运行过程中，会高频出现页面黑屏、黑色区块，白屏问题。 二、问题分析出现以上问题是由于页面渲染问题导致的，引发的可能原因是页面栈溢出、应用内存泄漏。经过getCurrentPages()输出页面栈... 一、前言继前期iOS由于移动设备内存不足导致页面白屏问题之后，（详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》）又发现APP在iOS系统运行过程中，会高频出现页面黑屏、黑色区块，白屏问题。 二、问题分析出现以上问题是由于页面渲染问题导致的，引发的可能原因是页面栈溢出、应用内存泄漏。经过getCurrentPages()输出页面栈...
- 自定义 Hooks 是我对逻辑重用的第二波探索。研究的过程，除了搞明白怎么创建 自定义 Hooks、优点、使用场景，还因此意识到项目代码中存在的可提升空间。收获颇丰！ 自定义 Hooks 是我对逻辑重用的第二波探索。研究的过程，除了搞明白怎么创建 自定义 Hooks、优点、使用场景，还因此意识到项目代码中存在的可提升空间。收获颇丰！
- 遇到逻辑复用这个话题的时候，我尝试从不同层面去思考问题。既有对具体问题的实现方案，也有实现方案背后包含了哪些技术点，以及延伸了不同方案可行与不可行的总结。 遇到逻辑复用这个话题的时候，我尝试从不同层面去思考问题。既有对具体问题的实现方案，也有实现方案背后包含了哪些技术点，以及延伸了不同方案可行与不可行的总结。
上滑加载中
推荐直播
-
手把手教你在 CodeArts 上部署敏捷流水线2024/12/31 周二 16:30-18:00
Jerry 华为云生态技术讲师
CodeArts的适用场景以及如何从CodeArts Pipeline出发，一步步添加关联工具，最后让整个流水线流动起来，一起来动手试试吧。
即将直播 -
GaussDB数据库介绍2025/01/07 周二 16:00-18:00
Steven 华为云学堂技术讲师
本期直播将介绍GaussDB数据库的发展历程、优势、架构、关键特性和部署模式等，旨在帮助开发者了解GaussDB数据库，并通过手把手实验教大家如何在华为云部署GaussDB数据库和使用gsql连接GaussDB数据库。
去报名
热门标签