JackieDYH的博客

经过多年的实战，函数组件是一个更加匹配React的设计理念 `UI = f(data)`，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生。> 对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键 - **组件的使用者可能报错了也不知道为什么**，看下面的例子。

这些属性，目前只适用于IOS系统，android的话，有一个替代属性elevation，这个属性影响着元素的z-index，就是绝对定位时的覆盖顺序(上面我们提到过)，也会在元素上产生一个阴影。2.react-native的样式应用于某一个组件上的话，该样式不会继承下去，而是只应用于设置该style的节点上（Text相关样式除外，Text嵌套的话，其文字属性也会应用于子元素）。另外，元素默认的position，是relative，所以其实上面的例子，我们不用指定position，也能得到同样的效果。

熟悉Vue的朋友都应该清楚，在页面中可以使用v-if进行条件判断显示和v-for进行循环展示内容。那么在ReactNative如何实现呢？

代码 const Experience = () => { let level = Math.ceil(user?.level / 10) return level * 500 }<View style={styles.progressBar}> <Text style={styles.progressBarText}> 还需{Experience() - user?.experience}点经验升级至LV{user?.level...

代码function LevelGetImages(level: number) { let res = [] const marks = [ { mod: 20, image: Images.setting.level_king }, { mod: 15, image: Images.setting.level_queen }, { mod: 10, image: Images.setting.level_moon }, { mod: 5, image:...

React Native flex布局 -弹性布局

react-native生命周期函数

执行命令run-android - 错误内容error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses"..........处理1、正确安装android studio2、正确设置ANDROID_HOME环境变量3、正确安装jdk..

目标学习完本教程希望对下面这个.eslintrc.js文件能够做到心里有数// .eslintrc.js module.exports = { "extends": "airbnb", "rules": { "semi": [2, "never"], "no-console": 0, "comma-dangle": [2, "always-multiline"], "max-len": 0, "react/jsx-first-prop-ne..

在页面中循环展示信息的功能之前一般是用js来实现的，那么用CSS3该如何实现实现呢有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 克隆A一份完全一样的数据B放在原数据A的后面； 使用setInterval向上滚动A的父级容器； 当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补

react - JSXReact 背景介绍React 入门实例教程React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。什么是React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 用来构建UI的 JavaScript库 React 不是一个 MV..

react和vue的业务逻辑是差不多，vue在react上封装了更简洁的方法，使用起来更加的便捷，如：提供了便捷的指令（v-for,v-if,v-model），还提供了更多的属性（computed,watch），用react的，更接近js原生，更容易于理解它react：Facebook（团队） vue：尤雨溪生命周期(列出常用的)reactcomponentWillMount：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。下一个...

antd第一种方法 babel-plugin-importnpm run eject //react的webpack配置默认不可显，该命令可显示confignpm i babel-plugin-import --save-dev //安装babel按需加载依赖​​​​​​​package.json添加下列配置"plugins": [ ["import",{"libraryName": "antd","libraryDirectory": "es","style": "..

react框架 *react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库react官网：https://react.docschina.org/react不是一个完整的MVC框架，最多可以认为是MVC中的V（View）react引入了虚拟DOM机制react引入了组件化思想react使用facebook专门为其开发的一套语法糖--jsx使用注意事项-jsx语法注意事项 jsx语法* 标签内容内属性 例如*

方式一package.json 添加配置项{ { ... }, "proxy":"目标域名地址:端口号"}重启react项目，此时，就可以进行代理转发。在package.json中添加proxy后，当访问一个react项目不存在的路由地址时，会自动的转发到proxy对应的目标域名地址上。（但是当请求的地址和路由规则一致时就会出问题，并且不能设置多个转发规则）方式二使用插件npm i http-proxy-middleware --save

安装插件npm install react-awesome-swiper使用import React from 'react';import AwesomeSwiper from 'react-awesome-swiper';//this config is same as idangrous swiperconst config = { loop : true, autoplay: { delay: 3000, stopOnLastSlide: false.

一、查询字符串参数处理-插件方式处理querystring.stringify()接收3个参数第一个参数，解析后的 url 对象querystring.stringify({name:'dyh',course:['jade','node'],from:'zh'}) //运行结果'name=dyh&course=jade&course=node&from=zh'第二个参数，query参数之间的链接符号，默认是 &querystring.s

生命周期钩子函数速查表# React生命周期钩子函数## 页面渲染期* constructor 构造函数 在所有函数执行之前它先执行(数据接收 实现继承super(props))* UNSAFE_componentWillMount 组件将要挂载(数据挂载之前 可以操作数据 不可以操作dom)* render 页面渲染(渲染组件 和 html 标签)* componentDid.

1. 挂载卸载过程1.1.constructor()1.2.componentWillMount()1.3.componentDidMount()1.4.componentWillUnmount ()2. 更新过程2.1. componentWillReceiveProps (nextProps)2.2.shouldComponentUpdate(nextProps,nextState)2.3.componentWillUpdate (nextProps,nextState)2....

React常见错误①Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag虚拟DOM中只能有一个根标签②Warning: Invalid DOM property `class`. Did you mean `className`? in div在react的jsx语法中，class是一个类的关键词，所以标签的class属性要改为classN..

React控制元素显示和隐藏的方法目前我知道的有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue中的v-show。第三种是通过动态切换className。方法一：第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。class Demo extends React.Component{ constructor(prop..

可以在react项目中执行以下命令安装bootstrapnpm install bootstrap@3 --save在使用的时候，直接在index.js文件导入即可import 'bootstrap/dist/css/bootstrap.min.css';import 'bootstrap/dist/js/bootstrap';

import React, { Component } from 'react';import './App.css';export default class Home extends Component { state = { isidx: -1, empty: true, user: { name: '', age: '', }, info: [] } // 输入框数据绑定 iptChange(e, item)...