react

摘要 ：恰逢官方征文，谨以此篇记录自己一年的心酸历程与前端知识的感悟。 目录 在时代工场的主要工作 我为什么从时代工场离职？ 我辞职后去了哪里？ 先说说我的经历吧 分享给前端人一些我的博客整理，希望也可以帮助到你 关于粉丝高频疑惑的解答 在时代工场的主要工作 先简单说一下自己这一年的变化吧，以前是在时代工场办公，是一个初创的共享办公科技公司，在那边开发过时代工场后台管理系统，时代工场小程序，时代工场APP,时代工场网站，业余时间还要顺便运营一些新媒体（小公司，你懂的，人手不够，广泛撒网），APP是基于APICloud这种敏捷式开发平台开发，一套代码可以适配两种操作系统，自己一个人重零开始到上架Android应用到腾讯应用包、百度手机助手、华为应用市场、小米应用商店、阿里应用分发平台，APPStore整了一个全套流程。 上架的流程可以参考我往期的文章。 https://blog.csdn.net/weixin_41937552/category_9342190.html 至于微信小程序是采用的微信小程序那套体系，这个创业公司搞这个玩意所有的认证开发测试等都需要自己来，不要问为什么，问就是成本。框架采用的vue,网站也是采用的vue,网站及小程序用来展示页面，里面的数据共用一个后台管理系统。系统老板着急出成果，刚开始简单找了个模板，后面不断优化，已经用PHP逐渐改成自己想要的那种模样啦

React的ref有3种用法： 1. 字符串(已废弃) 2. 回调函数 3. React.createRef() （React16.3提供） 1. 字符串 最早的ref用法。 1.dom节点上使用，通过this.refs[refName]来引用真实的dom节点 < input ref ="inputRef" /> //this.refs['inputRef']来访问 2.类组件上使用，通过this.refs[refName]来引用组件的实例 < CustomInput ref ="comRef" /> //this.refs['comRef']来访问 2. 回调函数 回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的， 都是获取其引用。 回调函数的触发时机： 1. 组件渲染后，即componentDidMount后 2. 组件卸载后，即componentWillMount后，此时，入参为null 3. ref改变后 1.dom节点上使用回调函数 < input ref ={(input) = > {this.textInput = input;}} type="text" /> 2.类组件上使用 < CustomInput ref ={(input) = > {this.textInput = input;}} /> 3

JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套，保持和 HTML 一致的结构，语法上除了在描述组件上比较特别以外，其它和普通的 Javascript 没有区别。 并且最终所有的 JSX 都会编译为原生 Javascript。 JSX = JavaScript XML JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 特点 类XML语法：有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。 增强JS语义：不是模板，模板与页面是分离的，是字符串，而JSX是JS语法本身，有更多的扩展 结构清晰 抽象程度高：屏蔽了手动的DOM操作，跨平台-JSX是独立于平台的语法，React在不同的平台提供解释器 代码模块化：MVC是纵向切分，React是横向切分，大项目由众多小项目组成 HTML组件 与 React组件 HTML组件和HTML中原生的组件一样，而React组件是自定义的组件 JSX 中约定以大小写字母开头来区分，组件一般以大写字母开头 //JSX中支持绝大部分HTML标签 <label className= "lb" htmlfor= "uName" style={{color: 'red'; font-size: '14px'}}></label> // 组件类 class MyComponent extends

年底了，总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题都是超链接，可点击自行查阅） 希望能对您有用！ 如有意思的 轮子 可以在评论列出一起讨论下 color ==功能==：JavaScript库，用于不可变的颜色转换和对CSS颜色字符串的支持。 npm install color var color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)' console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ] console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 } uuidjs ==功能==：UUID.js-JavaScript的RFC兼容UUID生成器 // Create a version 4 (random number-based) UUID object var objV4 = UUID.genV4(); // Create a version 1 (time-based) UUID object var objV1

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 将元素渲染到 DOM 中 首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>: <div id="example"></div> 在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 "根" DOM 节点。 我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。 要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render()

之前文章中我们有讲到的 useState hook 和 useEffect hook 的一些概念和基本用法，趁着周末空闲时间，我们一起来看看 React 为我们提供的其他 hooks 的一些基本使用吧。 useReducer useReducer hook 接收两个参数，第一个是参数是一个函数（这是一个 reducer函数：它接收两个参数 state 和 action，它会根据 action 类型返回一个新的state），第二个参数是一个初始状态（intialState）。语法如下： const [newState, dispatch] = useReducer((state, action) => { //根据派发出去的 action 类型，返回一个 newState }, intialState) 看一个例子： const Counter = () => { //count对应 reducer 返回的nweState //dipatch 负责派发一个 action(动作) //action是一个具有 type 属性的一个javascript对象 const [count, dispatch] = useReducer((state, action) => { switch (action.type) { case 'add' : return state + 1 ; case

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。 FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。 FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是， FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。 FlatList组件必须的两个属性是data和renderItem。data是列表的数据源， 而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。 下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data， 其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。 import React, { Component } from 'react'; import { FlatList, StyleSheet, Text, View } from 'react-native'; export default class FlatListBasics extends Component { render() { return ( <View style={styles.container}>

不要再滥用useMemo了！你应该重新思考Hooks memoization 作者 | Ohans Emmanuel译者 | 王强编辑 | Yonie 在使用 React Hooks 的过程中，作者发现过渡频繁的应用 useMemo 用会影响程序的性能。在本文中作者将与大家分享如何避免过度使用 useMemo，使程序远离性能问题。 经过观察总结，我发现在两种情况下 useMemo 要么没什么用，要么就是用得太多了，而且可能会影响应用程序的性能表现。 第一种情况很容易就能推断出来，但是第二种情况就比较隐蔽了，很容易被忽略。如果你在生产环境的应用程序中使用了 Hook，那么你就可能会在这两个场景中使用 useMemo Hook。 下面我就会谈一谈为什么这些 useMemo 没什么必要，甚至可能影响你的应用性能。此外我会教大家在这些场景中避免过度使用 useMemo 的方法。 我们开始吧。 不需要 useMemo 的情况 为了方便，我们把这两类场景分别称为狮子和变色龙。 先不用纠结为什么这么叫，继续读下去就是。 当你撞上一头雄狮，你的第一反应就是撒丫子跑，不要成为狮子的盘中餐，然后活下来跟别人吹牛。这时候可没空思考那么多。 这就是场景 A。它们是狮子，你应该下意识地躲开它们。 但在谈论它们之前，我们先来看看更隐蔽的变色龙场景。 相同的引用和开销不大的操作 参考下面的示例组件： /**

前端周报：微软发布基于Chromium的Microsoft Edge预览版；Nuxt发布v2.9.0；npm 发布v6.11.0 作者 | Yonie, Zehao前端周报专注大前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、深度阅读、开源项目等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端周报内容。 新闻热点 前端新闻 【 Chrome 76 将增加原生 Lazy-Loading 功能 】：这是处理延迟加载的重大改进。如果 Chrome 76 中能稳定运行此功能，它将是长期以来性能最强大的版本之一。详情请查看: https://scotch.io/bar-talk/native-lazy-loading-launched-on-chrome-76 【 Vue 最新动态 】：基于函数的组件 API 提议被拒绝，尤雨溪发布了重新设计的 Function-API RFC，现在被称为 Composition API。详情请查看：https://news.vuejs.org/issues/154 【 Nuxt 发布 v2.9.0 版本 】：在本版本中 vue-meta 升级到 2.0.0 版本，外部化 TypeScript 支持；详情请查看: https://twitter.com/nuxt_js/status

360度全方位观测：React Native与Flutter的跨平台王位之争 作者 | Krissnawat Kaewsanmuang译者 | 王强编辑 | Yonie 我们身处科技高速发展的时代；互联网日新月异，移动应用程序开发产业也在大踏步前进。多年来，移动应用的市场需求呈爆发式增长；众多企业都在开发自己的移动应用程序，或者用于促销自己的产品，或者用来向客户提供更好的服务。 众所周知，主导全球市场的两大移动平台分别是 iOS 和 Android。当一家企业决定开发自己的移动应用时，他们需要分别为 iOS 和 Android 平台部署功能相同的应用程序。为此，开发人员需要学习两个平台的不同语言和开发流程，从而在两大平台上构建表现基本一致的应用版本。为了解决这个问题，跨平台框架应运而生，帮助开发者构建可同时适用于 iOS 和 Android 平台的移动应用。如今最流行的两大跨平台应用开发框架就是 React Native 和 Flutter。 跨平台框架发展历史 谷歌和 Facebook 的竞争关系始于 Web 产业。谷歌的 AngularJS 是 Web 应用开发市场中最流行的 Javascript 框架之一。与此同时，由 Facebook 构建的 React 则是在 Web 应用程序开发流程中广泛应用的 JavaScript 库。一般认为 Angular JS 和 React