react

在上一篇介绍了 React Native开发环境搭建 ，我们已经可以在本地成功运行一个helloword应用了，本节将开始详细分析如何搭建一个React Native App应用架构，并支持完整本地运行预览。 完整代码见github 欢迎访问我的个人博客 前言 现在已经有很多脚手架工具，如 ignite ，支持一键创建一个React Native App项目结构，很方便，但是享受方便的同时，也失去了对项目架构及技术栈完整学习的机会，而且通常脚手架创建的应用技术架构并不能完全满足我们的业务需求，需要我们自己修改，完善，所以如果希望对项目架构有更深掌控，最好还是从0到1理解一个项目。 项目结构与技术栈 首先使用 react-native-cli 工具创建一个React Native应用： react-native init fuc 生成项目结构如下图： andorid和ios目录分别存放对应原生平台代码; package.json 为项目依赖管理文件； index.ios.js 为ios平台入口文件， index.android.js 为android平台入口文件，通常用来注册React Native App根组件； .babelrc 文件，babel的配置文件，React Native默认使用babel编译JavaScript代码； __tests__ 项目测试目录。

近两年来小程序逐渐成为互联网的一个行业风口，一直备受业界关注，各大厂也接踵推出了自己的小程序。近日京东也推出了小程序： 京东小程序 。Taro 作为一款专注于多端统一开发的框架，第一时间对京东小程序进行了适配。接下来就跟着小编一起了解一下如何使用 Taro 快速开发京东小程序吧。 背景 京东小程序 京东小程序平台 是京东自研技术（能力）开放平台，平台集成京东特色功能，串联商家和用户。为用户提供延展服务，给商家带来新机遇。京东小程序平台不仅支持存量自营、POP商家自动开通，还支持新型的非电商领域商家参与小程序生态。 加入京东小程序开放平台的商家，可以利用京东平台完整的营销、交易、支付、会员、物流等能力，更加便捷地构建起自己的特色服务场景。助力商家实现生态场景上的“跃迁”，快速为用户提供一站式服务体验。 京东小程序只需一次开发即可运行在京东 APP、京东金融 APP、京麦 APP 三端。京东 APP、京东金融 APP 会开放特定的能力，对优质小程序还会开放多个高流量入口，包含扫码、搜索、消息等多种方式触达。而京麦 APP 小程序主要用于商家工具插件的开发定制。 Taro Taro 是凹凸实验室推出的一套遵循 React 语法规范的多端统一开发解决方案，也是京东小程序官方推荐的开发框架。 使用 Taro 开发不但能更规范、更有效率地编码， 畅享 React / Vue 生态的各种工具

　　AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。这是官网上对它的介绍。可以知道，这个asyncstorage也是以键值对的形式进行存储数据的。 1、封装DeviceStorage类 import { AsyncStorage }from 'react-native' ; export default class DeviceStorage{ static get(key) { return AsyncStorage.getItem(key).then((value) => { const jsonValue = JSON.parse(value); return jsonValue; }); } static save(key, value) { return AsyncStorage.setItem(key, JSON.stringify(value)); } static update(key, value) { return DeviceStorage.get(key).then((item) => { value = typeof value === 'string' ? value : Object.assign({}, item, value); return AsyncStorage.setItem

前言 ： 在4月25日，我参加了前端早早聊的在线直播话题---前端如何搞监控。 听完之后收获很大。我将把会议总结为前端搞监控的价值、需要监控的内容等方向去描述，并以自研监控SDK的经验为例，进一步了解前端搞监控的技术点所在。 一 前端监控系统概览： 1 为什么要做一套前端监控系统？ 通过用户行为采集分析，当前端及客户端线上出现异常时，可以通过用户行为链及设备环境，快速定位线上环境的问题所在。 齐次，当功能上线后，用户的使用效果没办法衡量。需要数据指标去衡量，比如功能使用率、性能指标等。 业务方的对业务的创意及需求需要反复不断的调优、开发，相同的组件开发了无数个，很可能明天又得改回去，这就造成了大量的资源浪费。如果没有一个量化体系的话，运营只能通过上次成功的经验来感觉。所以需要通过对用户数据的监控，从而得到一个调优策略和量化指标。 之后，我们需要知道对于界面设计风格及投放的广告资源，哪些手段会更有价值，去做一个人群的细分，提高用户体验。 2.前端监控需要监控什么？ 前端监控采集的内容主要包括行为分析、异常监控、性能监控等。 其行为分析主要有：页面的进入、离开、点击、滚屏、自定义事件 简单做法是在项目的编译过程中，将项目ID、页面ID等挂载在标签上，当进入页面时，我们就可以根据这些ID去定位唯一一个页面，这样就可以知道用户的页面进入、离开及按钮的点击等事件 在这张图里可以看到上报的数据

前后端分离框架前端react,后端springboot跨域问题分析 为啥跨域了 前端react的设置 springboot后端设置 为啥跨域了 由于前后端不在一个端口上，也是属于跨域问题的一种，所以必须解决这个问题. 前端react的设置 react设置我这里使用了fetch方式请求后端接口,所以在fentch方法里设置两个参数： mode: “cors”；这是前端允许跨域的设置 credentials: ‘include’；由于我需要把浏览器的cookie传入后端，所以需要这个设置 springboot后端设置 直接上配置说吧 // An highlighted block @Configuration public class CorsConfig implements Filter { @Override public void init ( FilterConfig filterConfig ) throws ServletException { } @Override public void doFilter ( ServletRequest req , ServletResponse res , FilterChain chain ) throws IOException , ServletException { HttpServletResponse response

前言 我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的 当前组件 ，而不会递归的去更新子组件，这也是它性能强大的原因之一。 例子 举例来说 这样的一个组件： < template> < div> {{ msg }} < ChildComponent /> </ div> </ template> 复制代码 我们在触发 this.msg = 'Hello, Changed~' 的时候，会触发组件的更新，视图的重新渲染。 但是 <ChildComponent /> 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。 在以前的一段时间里，我曾经认为因为组件是一棵树，所以它的更新就是理所当然的深度遍历这棵树，进行递归更新。本篇就从源码的角度带你一起分析，Vue 是怎么做到 精确更新 的。 React的更新粒度 而 React 在类似的场景下是 自顶向下的进行递归更新的 ，也就是说，React 中假如 ChildComponent 里还有十层嵌套子元素，那么所有层次都会递归的重新render（在不进行手动优化的情况下），这是性能上的灾难。（因此，React 创造了 Fiber ，创造了 异步渲染 ，其实本质上是弥补被自己搞砸了的性能）。 他们能用收集依赖的这套体系吗？不能，因为他们遵从 Immutable 的设计思想，永远不在原对象上修改属性，那么基于 Object

跨层级的获取组件实例 如果是普通的元素，ref="p"获取的是真实的dom元素，如果是自定义组件，那么获取到的就是这个组件的实例了。 this.$ref.XXXX可以获取当前组件上下文的实例。如果说要获取跨层级的组件的实例？那就很不方便了。 如果要获取父组件的，可以通过parent.refs. 获取子组件的children.refs 如果层级多的时候，10级20级别的。那就很不方便了。 如果A组件要访问E组件的实例。或者是F要访问A组件的实例。第一种想法可能是通过递归的方式一直层级的网上找parent。一层层的去查找目标实例， 递归繁琐，而且性能低效。每次访问实例都要走一遍递归的形式，因为你的实例是不能被缓存 的，然后你底层的子组件的实例，如果被更新了。你父组件是不能及时的知道它这个实例是更新了。所以说你每次使用的时候，都需要层级的去获取。就是你没有办法去缓存。 争对这种情况设计了一种更加高效的方案。。如果你熟悉react ref它是一个call back回调的形式，这样我们在回调中就可以做很多的事情，就比较灵活了。 争对这种回调灵活的特点，我们可以设定一种主动通知，主动获取这样一种方案。 加入A要获取E的实例，A只需要提供一个钩子函数，E实例生成或者更新之后，主动的去调用这个沟子函数，来通知A节点，我这个实例已经生成好了。我这个实例有更新，只需要告诉这个A节点

webpack多页面打包配置 一、总结 一句话总结： 有几个页面其实就可以new几个HtmlWebpackPlugin对象放到内存中去 webpack.common.js const plugins = [ 　　 // HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中 　　 new HtmlWebpackPlugin({ 　　　　template: ' src/index.html ' , 　　　　filename: ' index.html ' , 　　　　chunks: [ ' vendors ' , ' main ' ] 　　}), 　　 new HtmlWebpackPlugin({ 　　　　template: ' src/index.html ' , 　　　　filename: ' list.html ' , 　　　　chunks: [ ' vendors ' , ' list ' ] 　　}), 　　 new CleanWebpackPlugin() ]; 二、webpack多页面打包配置 转自或参考：webpack多页面打包配置 https://www.cnblogs.com/wzndkj/p/10909670.html 单页面应用：整个应用里面只有一个html文件。现在主流的框架，vue

　　好程序员web前端培训分享React学习笔记（三），组件的生命周期 　　React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后) 初始化 在组件初始化阶段会执行 .constructor .static getDerivedStateFromProps() .componentWillMount() / UNSAFE_componentWillMount() .render() .componentDidMount() 更新阶段 props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法： .componentWillReceiveProps() / UNSAFE_componentWillReceiveProps() .static getDerivedStateFromProps() .shouldComponentUpdate() .componentWillUpdate() / UNSAFE_componentWillUpdate() .render() .getSnapshotBeforeUpdate() .componentDidUpdate() 卸载阶段 .componentWillUnmount() 错误处理

前言 一周的砖又快搬完了，又到了开心快乐的总结时间~这两周一直在 hook 函数的“坑”里，久久不能自拔。应该也不能叫做“坑”吧，还是自己太菜了，看文档不仔细，很多以为不重要，但在实际应用中却很关键的点总是被自己忽略。所以我准备多花点时间，把官网的一些 hook 函数，再回过头看一遍，整理整理（在整理的过程，我觉得更容易发现问题和总结经验）。 这篇文章主要整理一下 React 中的三个基础 Hook： useState useEffect useContext useState useState 相比其他 hooks 还是很简单的，主要就是用来定义变量。 官方文档 描述的也很清楚，对此已经很熟练的看官大大可以跳过哦~ 相遇--初识 const [count, set Count] = useState(0) 复制代码 调用 useState 方法做了什么？ 定义一个“state变量”。 useState 需要什么参数？ useState 方法接收一个参数，作为变量初始化的值。（示例中调用 useState 方法声明一个 “state变量” count ，默认值为 0。） useState 方法的返回值是什么？ 返回当前 state 以及更新 state 的函数。 相知--使用useState React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化