react

前言 对于刚开始学习前端的伙伴俩说，问得最多的问题就是 ——前端技术现在如此繁杂，我到底应该如何学习。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是CSS&HTML&JavaScript了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中JavaScript又是重中之重。 接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。 目录 三大件学习 库工具 前端框架（ MVVM ）的学习 浏览器 & 计算机基础 前端工程化 性能优化 Nodejs 数据结构和算法 依葫芦画瓢 三大件学习 现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。 刚入门的朋友，我觉得不应该一开始就学习像Vue、TypeScript、Webpack等知识。应该把重点放在CSS&HTML&JavaScript基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将CSS(3)&HTML(5)的知识点认真学习一遍。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。 当然如果你愿意

ES6方面： 　　关于export，import，export default使用，下面这篇博客写的不错： 　　　　https://www.cnblogs.com/xiaotanke/p/7448383.html 　　　　我这边引用了几点： 1、export与export default均可用于导出常量、函数、文件、模块等 2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用 3、在一个文件或模块中，export、import可以有多个，export default仅有一个 4、通过export方式导出，在导入时要加{ }，export default则不需要 React方面： 　　官网基础入手： 　　搭建我这边是使用的是create-react-app 　　react是一个采用声明式，高效而且灵活的用来构建用户界面的框架 　　准备： 　　我们现在有3个组件： 　　　　Square 　　　　Board 　　　　Game 　　Square 组件代表一个单独的 <button>，Board 组件包含了9个squares，也就是棋盘的9个格子。 　　Game 组件则为我们即将要编写的代码预留了一些位置 　　Props属性：父组件传数据给子组件 　　slice()：属性浅拷贝方法 来源： https://www

一、配置 在项目根下面创建目录assets/fonts/，并将下载的.ttf字体文件放入之； 在项目根下面创建文件react-native.config.js，里面内容如下： module.exports = { assets: ['./assets'] }; 执行react-native link即可（这步实际上是可选的）。 二、使用 通过Text组件使用（结合unicode码使用，可在下载的字体包里面的unicode.html中查看各个图标的unicode码）： <Text style={{fontFamily:'iconfont'}}></Text> 三、字体文件更新问题 需要换两个位置： 一个是原始的assets/fonts/下面的字体文件，它是IOS引用的（IOS引用的就是原始文件）； 另一个是android/app/src/main/assets/fonts下面的那个字体文件，它是安卓引用的，安卓是拷贝过去了的。 注意：看到许多人在基于react-native-vector-icons使用，甚至有人采用的方案是修改项目下面node_modules下面的react-native-vector-icons相关文件，这是极不可取的。node_modules是依赖目录，里面的内容并不是稳定的，很有可能某天会删掉后再yarn install，如此对下面的修改就会全部丢失。 来源

现在最热门的前端技术，毫无疑问就是React。 React起源于Facebook公司的内部项目，他们认为现在的MVC不能满足他们的扩展需求，由于他们的代码库非常庞大，组织也非常复杂，所以每当添加一个新的功能时就变得异常的复杂，所以他们为了解决这个问题，提出了React。 那么React是什么呢？ 其官网上说的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。一个Javascript库，用于构建用户界面。 React主要解决什么问题呢？ 他们的官网上有这么一句话：We built React to solve one problem: building large applications with data that changes over time. 构建那些会随时间变化的大型应用。 在整个web的MVC架构中，你可以认为React是整个视图层，并且是一个高效的视图层。React提供了和以往不一样的看待视图层的方式，它以组件开发为基础。对于React而言，你的页面都是由一个个组件构成的，你可以通过分割组件的方式去实现复杂的页面或者某个功能模块。并且这些组件是可以被复用的。 React的另一大特点是：虚拟DOM节点。它让页面的渲染更加的高效，并且比直接操作真实DOM更加的可控。这两大特点使得React有了强大的渲染页面的能力。

有人说，如果你想掌握好一门技术，那么最好的方式就是去当老师，去教会别人这门技术。在教别人的过程中，你必须要去深入的了解这门技术的方方面面，同时还要思考怎么才能让别人理解。每一个做过的人都知道，这要比自己学习更难。 以前我带的团队中，都会有比较好的技术分享的氛围，我会逼着每个人都定期做一些自己熟悉的技术分享，一方面帮助大家共同成长，同时也让自己有更大的成长。当然我自己也很乐意做这样的技术分享的事，我一直觉得能帮助别人是一件快乐的事情。 技术分享有主要的形式有写技术文章、做内部技术讲座。无论是哪一种形式的技术分享，都有一些基本注意事项： 突出主题 明确受众 内容通俗易懂 良好的互动和答疑 控制时间和节奏 突出主题 每一次的技术分享，篇幅有限，时间有限，听众的注意力也有限，这就要求我们必须能突出主题，不能什么都讲，最后什么都没印象，而是尽可能聚焦于一个点，让听众留下深刻印象。事实上，一次技术分享，能让大部分听众在一个知识点上有所理解和掌握，就已经非常成功了。 例如前不久我刚在部门做了一次技术分享，关于一个聊天系统的技术实现，事实上这个系统比较复杂，服务端用到了node、socket、redis、mysql，另外还有一些负载均衡、安全认证等技术，客户端用了React、Redux、React-Router、Immutable、SASS、Gulp、Babel、ES6等知识点，如果要完整的讲一遍

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子 输出的样子 实现render函数生成真实DOM 设置属性 render函数 渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能) __ 补丁:用来更新DOM的任务__ 比较原则 平级对比 不跨级对比(无A__删除__A) 同级复用 遍历规则 先序深度优先遍历(从根节点向下级子节点遍历) 125叫广度优先 12345深度优先 实现diff函数 比较思路规则 type相同,比较属性,属性不同生成补丁包patch {type:'ATTRS',attrs:{class:'xx'} } 新节点在原DOM中不存在 {type:'REMOVE',index:xxx} 节点类型不同,直接替换 {type:'REPLACE',newNode:xxx} 文本变化 {type:'TEXT',text:'xxx'} 来源： https://www.cnblogs.com/qidaoxueyuan/p/12461581.html

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子 输出的样子 实现render函数生成真实DOM 设置属性 render函数 渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能) __ 补丁:用来更新DOM的任务__ 比较原则 平级对比 不跨级对比(无A__删除__A) 同级复用 遍历规则 先序深度优先遍历(从根节点向下级子节点遍历) 125叫广度优先 12345深度优先 实现diff函数 比较思路规则 type相同,比较属性,属性不同生成补丁包patch {type:'ATTRS',attrs:{class:'xx'} } 新节点在原DOM中不存在 {type:'REMOVE',index:xxx} 节点类型不同,直接替换 {type:'REPLACE',newNode:xxx} 文本变化 {type:'TEXT',text:'xxx'} 来源： oschina 链接： https://my.oschina.net/u/4453851/blog/3191623

安装 npm install --save redux npm install --save react-redux npm install redux-thunk npm install --save-dev redux-devtools 上面的三个命令分别安装了redux库、React绑定库、redux-thunk中间件和开发者工具 建结构 mkdir actions mkdir reducers mkdir components mkdir containers mkdir store 上面的命令在根目录下新建了五个文件夹 actions 存放了所有的动作，在组件中通过diapatch来触发action的方法 reducers 存放了所有更新state的方法，action方法触发reducer来更新state components 存放了所有的组件 containers 存放了容器组件，通过容器我们把state的值绑定到组件props上，把action创建函数绑定到props上 store 存放用于注册store的配置文件 基本使用 一个简单的例子,实现一个拉取豆瓣top250电影的列表 新建项目模板文件 touch index.html 在根目录下新建index.html文件作为项目的模板文件,内容如下 <!DOCTYPE html> <html> <head> <meta

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子 输出的样子 实现render函数生成真实DOM 设置属性 render函数 渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能) __ 补丁:用来更新DOM的任务__ 比较原则 平级对比 不跨级对比(无A__删除__A) 同级复用 遍历规则 先序深度优先遍历(从根节点向下级子节点遍历) 125叫广度优先 12345深度优先 实现diff函数 比较思路规则 type相同,比较属性,属性不同生成补丁包patch {type:'ATTRS',attrs:{class:'xx'} } 新节点在原DOM中不存在 {type:'REMOVE',index:xxx} 节点类型不同,直接替换 {type:'REPLACE',newNode:xxx} 文本变化 {type:'TEXT',text:'xxx'} 来源： CSDN 作者： 凃老师 链接： https://blog.csdn.net/tjx11111/article/details/104779101

import React from 'react'; class Home extends React.Component { constructor() { super() this.state = { userInfo: '张三', userAge: 30, list: [ { title: "张三12 " }, { title: "张三123 " }, { title: "张三1234 " }, { title: "张三12345 " } ], } } run() { alert(1) } run1() { alert(this.state.userInfo) } run2 = () => { alert(this.state.userAge) } render() { let listResult = this.state.list.map((value, key) => { return <li key={key}>{value.title}</li> }) return ( <div> <p>{this.state.userInfo}</p> <ul> {listResult} </ul> <button onClick={this.run}>点击</button> <button onClick={this.run1.bind(this)}>改变this指向<