react

React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle ， useRef /* child子组件 */ // https://reactjs.org/docs/hooks-reference.html#useimperativehandle import {useState, useImperativeHandle} from 'react'; ... // props子组件中需要接受ref const ChildComp = ({cRef}) => { const [val, setVal] = useState(); // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用 useImperativeHandle(cRef, () => ({ // changeVal 就是暴露给父组件的方法 changeVal: (newVal) => { setVal(newVal); } })); ... return ( <div>{val}</div> ) } 　　 /* FComp 父组件 */ import {useRef} from 'react; ... const FComp = () => { const childRef = useRef(); const

以太坊彩票项目 目录 项目概述 项目具体实现 [1].彩票业务规则示例图 [2].整体项目搭建 [3].彩票合约 lottery.sol [4].编译合约 01-compile.js [5].部署合约 02-deploy.js [6]. 从区块链获取合约实例 [7].完善界面 [8].最终效果 创作声明 备注 目录 项目概述 solidity 编写合约，node.js 编译、部署、获取、交互合约，react搭建前端界面 超详细~ (1)彩票业务规则-智能合约lottery.sol [1] 全民参与(play函数) [2] 每次投注只能投注1eth [3] 每个人可以投多注 [4] 仅限管理员可以开奖(KaiJiang函数) [5] 仅限管理员可以退奖(TuiJiang函数) (2)编译智能合约 01-compile.js [1] 导入solc编译器和fs库 [2] fs读取contracts文件夹下lottery.sol合约 [3] solc编译合约 [4] 导出bytecode(机器码)和interface(ABI) (3)部署智能合约上链 02-deploy.js [1] 获取bytecode和interface [2] 导入web3 [3] 设置网络，管理员(部署合约的人)实例化web3(.setProvider) [4] 拼接合约数据 [5] 拼接bytecode [6]

React简介和使用 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 简介 用于构建用户界面的 JavaScript 库 特点 声明式 React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。 以声明式编写 UI，可以让你的代码更加可靠，且方便调试。 组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。 一次学习，随处编写 无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。 React 还可以使用 Node 进行服务器渲染，或使用 React Native开发原生移动应用。 安装 npx create-react-app my-app 运行 cd my-app npm start 感谢 万能的网络 以及勤劳的自己 关注公众号： 归子莫，获取更多的资料，还有更长的学习计划 来源： oschina 链接： https://my.oschina.net/u/4365362/blog/4302553

9月30日，尤雨溪在medium个人博客上发布了vue3.0的开发思路，国内有翻译的版本，见文章最后的参考链接。3.0带了了很大的变化，他讲了一些改进的思路以及整个开发流程的规划。 vue3.0的改进思路 vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法，而3.0对这三部分都做了更改。 1. 响应式 2.x的响应式是基于Object.defineProperty实现的代理，兼容主流浏览器和ie9以上的ie浏览器，能够监听数据对象的变化，但是监听不到 对象属性的增删 、 数组元素和长度的变化 ，同时会在vue初始化的时候把所有的Observer都建立好，才能观察到数据对象属性的变化。 针对上面的问题，3.0进行了革命性的变更，采用了ES2015的Proxy来代替Object.defineProperty，可以做到监听对象属性的增删和数组元素和长度的修改，还可以监听Map、Set、WeakSet、WeakMap，同时还实现了惰性的监听，不会在初始化的时候创建所有的Observer，而是会在用到的时候才去监听。但是，虽然主流的浏览器都支持Proxy，ie系列却还是不兼容，所以针对ie11，vue3.0决定做单独的适配，暴露出来的api一样，但是底层实现还是Object.defineProperty，这样导致了ie11还是有2.x的问题。但是绝大部分情况下，3

前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中，比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中，比如你可以看见头部导航条中的博客昵称有一个下划线。下面是它可以实现的基本效果，点击按钮试一试吧。 使用 npm install --save rough-notation 通过将元素传递到 annotation 来创建对象，以及通过配置来描述样式。拥有 annotation 对象后，可以调用 annotation.show() 显示。 import { annotate } from 'rough-notation'; const e = document.querySelector('#myElement'); const annotation = annotate(e, { type: 'underline' }); annotation.show(); 通过 Group 创建多个动画注释： import { annotate, annotationGroup } from 'rough-notation'; const a1 = annotate(document.querySelector('#e1'), {

前言 JS是前端的核心，但有些使用技巧你还不一定知道； 本文梳理了JS的41个技巧，帮助大家提高JS的使用技巧； 文章有点长，可以clone下源码，直接撸，源码地址请戳全部源码，原创不易，欢迎star； 序列文章： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧 Array 1.数组交集 普通数组 const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9]; const intersection = arr1.filter( function (val) { return arr2.indexOf(val) > -1 }) console.log(intersection) //[5, 8, 9] 复制代码 数组对象 数组对象目前仅针对value值为简单的Number，String，Boolan数据类型 const arr1 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name5', id: 5 }]; const arr2 = [{ name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name:

Vue作为一款目前最流行的前端框架之一，是许多前端开发工程师的不二选择。最近我在前端岗位上也运用Vue实现了几款产品，那么今天来分享一下Vue是什么，以及我对Vue的见解。 一、定义 Vue是一套用于构建用户界面的 渐进式 JavaScript框架 与传统JS和JQuery框架不同，Vue的 渐进式框架 表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。 形成Vue渐进式框架的核心概念为： 组件化 ， MVVM ， 响应式 ，和 生命周期 ，下面会一个个详细介绍。 二、为什么要用Vue？ 1. 组件化 Vue将组成一个页面的HTML，CSS和JS 合并到一个组件 中，可以被其他组件或页面引入而 重复利用 。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程 拆分 为一个个组件，重复利用的性质也大大提高了开发的效率。 2. MVVM 数据双向绑定 MVVM模式（全称为Model-View-ViewModel）为Vue实现 数据双向绑定 。在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。 什么是数据双向绑定呢？当用户使View变化时（如填写表单），变化会 自动同步 到ViewModel处理相应逻辑，并将变化更新到Model数据库。反之，若服务端数据变化

前端是什么 工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效果，然后与后台进行各种数据交互。 在项目中充当一号背锅侠，项目出现问题第一个收到传唤的人。一个不受UI、后台待见，甚至不受协同开发的其他前端待见的岗位。 前端， 一个让我沉迷的岗位 前端， 一个将一张张UI效果图变成一个个生动的项目的岗位 一个将冰冷的后台数据转换为有趣的视觉享受的岗位 我感觉目前的前端市场整体还是处于迅速发展期，市场对于前端的需求也一直比较大。 但是前端存在一些比较畸形的地方，门槛低，随便培训上两个月就可以去应聘前端工程师，而培训之前大家从事的岗位是各式各样的，可能和计算机并没有太大关系，这就导致了要想进一步的提升自己比较困难。 所以市面上有很多这样的前端，培训出身，反复将一个技术在项目中使用，做到了某种技术的熟练，但是对于新技术的接受能力十分弱。 现在市场对于中高级的前端工程师需求更加迫切，所以入了前端的门，就需要不断的提升自己，无论你是学院派，还是培训派，还是自学派，都应该具有强烈的学习意识。 一个项目的起源来自于甲方，可能是你的老板或者你的客户，他们会提出需求，给你们描绘出一个世界。 这个抽象的世界会由UI变成一张张实图，交给你。而填充这个世界的数据也有由后台为你提供好。而你需要做的，就是在获取到这些之后将他们变成现实。 在这之前，你获取到需求之后

react中swiper的配置（纯swiper篇） 本次的swiper的配置基于3.4.2版本的swiper包 本篇博客可以有效解决配置的swiper不轮播，不自动轮播问题 1、首先安装swiper3.4.2版本 npm i swiper@ 3.4 .2 - s 这时候你会发现你的node_modules里面多了一个swiper包，如果你已经安装过其他的swiper，请先卸载 2、如果你的swiper里面轮播的内容是静态的，也就是死数据的话，new swiper可以放在 组件componentDidMount周期里面 componentDidMount ( ) { new Swiper ( '.swiper-container' , { autoplay : 1000 , loop : true } ) } 如果你的资源，会更新，是后期获取的，那么你的new swiper应该写在组件的componentDidUpdate 里面，这样的话，可以更新swiper，避免出现不轮播，效果出不来的情况 componentDidUpdate ( ) { new Swiper ( '.swiper-container' , { autoplay : 2000 , loop : true } ) } 3、swiper的引入和挂载 引入： import Swiper from "swiper

什么是前端？ 前端，也称web前端、web客户端、通常是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页，包括网站的表现层和结构层，通俗点就是用户可以看到的部分，前端与后端（服务端）相对应，前端调取后端（服务端）的数据展现给用户。 前端开发做什么？ 前端工程师，又叫web前端开发，前端开发是从网页制作演变而来。早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。随着互联网的发展，现代网页更加美观，交互效果更加显著，功能更加强大，于是网站开发细分成了前端开发和后端开发。 前端工程师通过前端技术完成界面设计、界面展现，交互效果，页面维护、网站优化等等。通俗点讲，就是设计、制作网页，实现网页上各种各样的特效和功能。 前端开发需要具备什么技能？ 前端开发的主要语言是JavaScript，JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript实现的。简单地说，JavaScript是一种运行在浏览器中的解释性的编程语言。在当今Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互，你没有其它选择。 现在前端开发的主要技术通常是指html、css、javascript技术和一些前端框架的使用，如Bootstrap,jquery