jsx

display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。 本文将深入一下这个有意思的属性值。 基本用法 根据 W3C 对 display: contents 的定义。 The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element

为什么转行应该选Web前端？ 互联网公司的生存始于前端，导致web前端的贵和火 一般初创的互联网公司最烧钱的时候往往都是刚刚获得风投或者融资的时候，因为他们要把钱砸向前端，因为那时候没有客户访问，对于企业来说只有先做好前端技术、做好客户体验一切才有可能。 用户体验做好，才有人访问，访问的人多了，才会优化后端，才做客户分析。因此，他们获得融资后第一件事就是招聘Web前端开发人员，就是要先把前端开发做起来，客户体验先做起来，这就是为什么前端很火，前端工程师工资很高的原因。 web前端优秀人才需求大，企业高薪抢聘 互联网+时代，web前端市场需求大。随着信息产业的迅猛发展，行业人才需求量也在逐年扩大。据国内权威数据统计，未来五年，我国信息化人才总需求量高达 1500万—2000万 人。其中**“网络工程”“UI设计”“web前端”**等人才的缺口最为突出。 web前端就业范围广，具有多重选择 现在web前端的就业面是很广泛的，能够选择的岗位有**：网页制作、前端制作工程师、网站重构工程师、前端开发工程师、资深前端开发工程师、前端架构师等等。** 这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。 前端 年纪大了还适合转行吗？ 其实对于能不能转行到前端开发

目前跨端开发比较热门的就是 React Native 和 Flutter 了，到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说，基于web生态的 React Native 应该是一个更加顺畅而自然的选择；但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而 React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter 。 这里主要就是记录一下学习 Flutter 的一些感想和看法： 包管理 布局和样式 json 状态管理 包管理 pubspec.yaml 文件的作用类似于 npm 的 package.json ，而yaml格式也比json方便。但是不能用命令行自动安装包却让习惯了npm的我觉得麻烦。因为Flutter 安装依赖包是这么一个流程： 打开 pub.dev 网站； 搜索需要的包，得到包的名称和版本； 把包名称和版本填入 pubspec.yaml ，最后才开始下载包。 我觉得应该直接命令行安装包，让它帮我们下载，名称版本自动写入 pubspec.yaml 。如果没有指定版本就是默认下载最新版本，因为很多时候我们并不想知道版本号，给我个能用的最新的版本号就ok了。 布局和样式 就和很多人想的一样，为什么不使用 jsx 或者 xml 格式进行布局，因为基于代码的方式看起来太不直观了

RN 组件的生命周期如下图： 生命周期回调函数 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentDidMount() 注意: 下述生命周期方法即将过时，在新代码中应该 避免使用它们 ： UNSAFE_componentWillMount() 更新 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 注意: 下述方法即将过时，在新代码中应该 避免使用它们 ： UNSAFE_componentWillUpdate() UNSAFE_componentWillReceiveProps() 卸载 当组件从 DOM 中移除时会调用如下方法： componentWillUnmount() 错误处理 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法： static getDerivedStateFromError() componentDidCatch()

前言 react diff 是从 fiber 树的 Root 节点开始，从上往下一层一层的对新老节点进行 比较。期间组件的 key 以及 type 决定是否需要复用老的节点。节点的 index 最终决定了 dom 是否需要被移动。没有被复用的节点会被删除，也就不需要对其子树进行 diff，从而不需要跨层级的 diff。 附图： 链接: pan.baidu.com/s/1sb1XqteO… 密码:s364 实际的栗子 item 1 this Header will be deleted item 2 this is Footer 复制代码 上面为测试的 HTML 结构，其中 this Header will be deleted 元素是在点击 document 的时候会被删除或者添加，代码如下，除了以这种形式的增删，还可以以 map 或者其他方式的增删节点，通过原生 dom 的增删，不会通过 react 处理自然也不会被 diff： class APP extends React.Component{ constructor(props){ super(props) this.state = { showHeader: false } } clickHandler (){ this.setState({ showHeader: !this.state.showHeader }) }

React 开发环境搭建 需要什么文件？ 只需要引入以下3个js文件即可： react.js : 核心文件，基础文件 react-dom.js : 渲染页面中的DOM,依赖于react.js文件，引用时必须在react.js的后面引用 babel.js : ES6语法代码转为ES5，将JSX语法（浏览器不认识）转化为JavaScript语法（浏览器认识） 如何获取这三个文件？ 使用npm的方式获取 注意：使用npm需要先安装npm，也就是安装node.js，安装node.js时会顺带安装npm 查看node.js版本 ： node -v 查看npm版本 ： npm -v react.js npm i react --save react-dom.js npm i react-dom --save bable npm i babel-standalone --save 具体操作流程： （1）新建项目文件夹： （2）win+R 打开控制台，cd进入项目文件夹 （3）输入如下命令行，创建package.json文件 npm init -y （3）下载react.js 在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save 使用npm 比较慢，也可使用 cnpm进行下载，下载镜像不同而已 cnpm install react

function pySegSort(arr,empty) { if(!String.prototype.localeCompare) return null; var letters = "*abcdefghjklmnopqrstwxyz".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃马拏噢妑七呥扨它穵夕丫帀".split(''); var segs = []; var curr; $.each(letters, function(i){ curr = {letter: this, data:[]}; $.each(arr, function() { if((!zh[i-1] || zh[i-1].localeCompare(this,"zh") <= 0) && this.localeCompare(zh[i],"zh") == -1) { curr.data.push(this); } }); if(empty || curr.data.length) { segs.push(curr); curr.data.sort(function(a,b){ return a.localeCompare(b,"zh"); }); } }); return segs; } 备注：网上好多版本内容是： var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀"

算术运算符用于对数字（文字或变量）执行算术运算。标准算术运算符是加法 + ，减法 - ，乘法 * 和除法 / 。和数学里面的加减乘除很类似，我们一起来看一下。 加法运算符 加法运算符 + 的作用是数值求和，这个应该很简单。 示例： 下面是简单的求两数之和： var a = 8; var b = a + 5; console.log(b); // 13 + 激发运算符除了计算两数之和，我们可以通过 + 连接字符串，得到的结果是一个新的字符串。 示例： 使用 + 将定义好的三个变量连接： str1 = "hello"; str2 = "xkd"; str3 = " "; console.log(str1 + str3 + str2); // 输出： hello xkd 除此之外，数字和一个字符串也可以通过 + 加号连接，返回结果同样为一个字符串。 示例： 看一下数字与数字相加，数字与字符串相加有什么不同： num1 = 10; num2 = 15; str1 = "15" console.log(num1 + num2 ); // 输出： 25 console.log(num1 + str1 ); // 输出：1015 注意在某些编程语言（例如Python）中不同类型是不能进行相加的，例如数字加字符串会报错。而 JavaScript 中数字和字符串相加，返回一个字符串。 减法运算符

自留 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel" src="patient.jsx"></script> <script type="text/babel" src="page.jsx"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <Page />, document.getElementById(