<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Twinkle的博客]]></title><description><![CDATA[人法地，地法天，天法道，道法自然]]></description><link>https://blog.csdn.net/twinkle_J</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; twinkle_J]]></copyright><item><title><![CDATA[《深入React技术栈》个人总结之1.6React与DOM（打卡五）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84953760</link><guid>https://blog.csdn.net/twinkle_J/article/details/84953760</guid><author>twinkle_J</author><pubDate>Tue, 11 Dec 2018 14:22:41 +0800</pubDate><description><![CDATA[在React组件的开发实现中，我们并不会用到ReactDOM，只有顶层组件以及由于React模型所限而不得不操作DOM的时候，才会使用它。

1.6.1 ReactDOM

findDOMNode
	render
	unmoutComponentAtNode(很少使用，是个用于卸载的操作)
 1.findDOMNode

DOM真正被添加到HTML中生命周期方法是componentDidMount...]]></description><category></category></item><item><title><![CDATA[《深入React技术栈》个人总结之1.5React生命周期（打卡四）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84939731</link><guid>https://blog.csdn.net/twinkle_J/article/details/84939731</guid><author>twinkle_J</author><pubDate>Mon, 10 Dec 2018 15:02:17 +0800</pubDate><description><![CDATA[React组件的生命周期根据广义定义描述：分为挂载，渲染和卸载这几个阶段。当渲染后的组件需要更新时，我们会重新去渲染组件，直至卸载组件。

因此,React组件分为两大类：

当组件在挂载或卸载时
	当组件接收新的数据时，即组件更新时。
React生命周期函数：

    组件加载的时候触发的周期函数

      constructor  数据初始化

     componentWillMou...]]></description><category></category></item><item><title><![CDATA[《深入React技术栈》个人总结之1.4React数据流（打卡三）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84895037</link><guid>https://blog.csdn.net/twinkle_J/article/details/84895037</guid><author>twinkle_J</author><pubDate>Sat, 08 Dec 2018 18:50:00 +0800</pubDate><description><![CDATA[其实单纯的react并不是一个框架，在其官网上就有这么说明：react是个view js 库。

今天开始学习React数据流（之后会学习redux），接下来就会带领大家进入编码世界。

在React中，数据是之上而下的单项数据流（vue也是单向数据流且是双向数据绑定“v-model”指令），即从父组件到子组件。这条原则让组件关系变的简单且可预测

state与props是react组件中一个很重...]]></description><category></category></item><item><title><![CDATA[《深入React技术栈》个人总结之1.3React组件（打卡二）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84845169</link><guid>https://blog.csdn.net/twinkle_J/article/details/84845169</guid><author>twinkle_J</author><pubDate>Wed, 05 Dec 2018 23:55:17 +0800</pubDate><description><![CDATA[第一章第三小节：React组件

今天学习了组件的发展历史，以及组件的定义，react组件的定义。

1.3.1  组件的演变

狭义上的组件（UI组件），比如Tabs组件。组件主要围绕在交互动作上的抽象，针对这些交互动作，利用javascript操作DOM结构或style样式来控制。（UI组件一定会有3部分组件：结构、样式和交互行为，分别对应着HTML、CSS、javascript。）
	广义上...]]></description><category></category></item><item><title><![CDATA[物流步骤UI组件（react）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84828267</link><guid>https://blog.csdn.net/twinkle_J/article/details/84828267</guid><author>twinkle_J</author><pubDate>Wed, 05 Dec 2018 12:18:55 +0800</pubDate><description><![CDATA[突然间，发现自己写个好多组件，等闲下来，到时候，自己写个UI组件库，哈哈哈。

这个组件还能进行优化，思路是有但是栏主感觉不好上手。

废话不说啦

看代码吧

stepsFew.jsx


import React,{ Component } from 'react'
import './index.less'
export default class StepsFew extends Comp...]]></description><category></category></item><item><title><![CDATA[js执行机制]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84553967</link><guid>https://blog.csdn.net/twinkle_J/article/details/84553967</guid><author>twinkle_J</author><pubDate>Tue, 04 Dec 2018 23:02:26 +0800</pubDate><description><![CDATA[当我们打开一个网页的时候，我们的代码一般以为是从上至下依次执行每行代码。

实际上则不然，看下下面的例子


&amp;lt;script&amp;gt;
    setTimeout(function(){
		 console.log('定时器开始啦')
		});

		new Promise(function(resolve){
		    console.log('马上执行for循环啦');
		   ...]]></description><category></category></item><item><title><![CDATA[《深入React技术栈》个人总结（打卡一）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84799277</link><guid>https://blog.csdn.net/twinkle_J/article/details/84799277</guid><author>twinkle_J</author><pubDate>Tue, 04 Dec 2018 22:48:38 +0800</pubDate><description><![CDATA[虽说已经在用React写了些项目，起初刚开始的时候并不喜欢react框架（之前是用vue的），到了后面才发现React的好处，深深陷进去了，所以买了本书《深入React技术栈》，细细解读这款框架的魅力

今天阅读了第一章节两小节

1.1.1 React的简介

react与angular等框架不同，并不是完整的MVC/MVVM框架。它更专注于view层的解决方案，也是一个包括View和Contr...]]></description><category></category></item><item><title><![CDATA[从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84563540</link><guid>https://blog.csdn.net/twinkle_J/article/details/84563540</guid><author>twinkle_J</author><pubDate>Tue, 27 Nov 2018 11:54:45 +0800</pubDate><description><![CDATA[前言

见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。

----------超长文+多图预警，需要花费不少时间。----------

如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。

----------正文开始----------

最近发现有不少介绍JS单线...]]></description><category></category></item><item><title><![CDATA[react 上拉加载]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84395237</link><guid>https://blog.csdn.net/twinkle_J/article/details/84395237</guid><author>twinkle_J</author><pubDate>Fri, 23 Nov 2018 15:50:46 +0800</pubDate><description><![CDATA[今天项目有个上拉加载的需求，ui框架用的是antd-mobile，

然而框架提供的上拉加载，看不懂，

很想搬砖，

但是怕在这块耗得时间过长，所以就自己造了个上拉加载轮子

需要的可以参考下


import React, { Component } from 'react';
import './myFeedBack.less';
import Header from '@/componen...]]></description><category></category></item><item><title><![CDATA[reactjs-swiper  在react项目中实现轮播]]></title><link>https://blog.csdn.net/twinkle_J/article/details/84069371</link><guid>https://blog.csdn.net/twinkle_J/article/details/84069371</guid><author>twinkle_J</author><pubDate>Wed, 14 Nov 2018 16:50:19 +0800</pubDate><description><![CDATA[1.快速新建项目

npx create-react-app swiper

2.安装依赖

yarn add reactjs-swiper axios --save-dev

3.文件目录



App.js


import React, { Component } from 'react';
import './App.scss';
import SwiperBar from './Swip...]]></description><category></category></item><item><title><![CDATA[Mobx中装饰器语法的环境配置]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83995964</link><guid>https://blog.csdn.net/twinkle_J/article/details/83995964</guid><author>twinkle_J</author><pubDate>Mon, 12 Nov 2018 18:06:32 +0800</pubDate><description><![CDATA[1.快速新建一个项目

npx create-react-app mobx-react

cd mobx-react

yarn eject

报错的话执行以下操作

git add .

git commit -m &quot;aa&quot;

2.安装依赖包

yarn add babel-plugin-transform-decorators-legacy @babel/plugin-proposal-dec...]]></description><category></category></item><item><title><![CDATA[react 引用antd的表单组件]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83823516</link><guid>https://blog.csdn.net/twinkle_J/article/details/83823516</guid><author>twinkle_J</author><pubDate>Wed, 07 Nov 2018 14:37:11 +0800</pubDate><description><![CDATA[
/*
 * @Author: Twinkle 
 * @Date: 2018-11-07 11:34:48 
 * @Last Modified by: Twinkle
 * @Last Modified time: 2018-11-07 14:29:15
 */
import React, { Component } from 'react';
import './App.less';
imp...]]></description><category></category></item><item><title><![CDATA[Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83820348</link><guid>https://blog.csdn.net/twinkle_J/article/details/83820348</guid><author>twinkle_J</author><pubDate>Wed, 07 Nov 2018 11:37:16 +0800</pubDate><description><![CDATA[一：创建一个react项目

npx create-react-app project

二：暴露所有内建的配置(注：我这里用的是yarn)

yarn eject

注：如果yarn eject 报错的解决的方法

git add .

git commit -m 'aa'

yarn eject

三：使用babel-plugin-import实现Antd按需加载，并修改package.jso...]]></description><category></category></item><item><title><![CDATA[react项目实现登录注册]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83752937</link><guid>https://blog.csdn.net/twinkle_J/article/details/83752937</guid><author>twinkle_J</author><pubDate>Mon, 05 Nov 2018 17:16:44 +0800</pubDate><description><![CDATA[eact项目中实现登录注册简单粗暴感悟

全局安装react官方推荐脚手架 create-react-app


npm install create-react-app -g


创建react项目


create-react-app react-login-register


进入项目并运行


npm start




image.png

安装此demo中各种依赖


  npm i...]]></description><category></category></item><item><title><![CDATA[react实现选项卡]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83584302</link><guid>https://blog.csdn.net/twinkle_J/article/details/83584302</guid><author>twinkle_J</author><pubDate>Wed, 31 Oct 2018 15:06:09 +0800</pubDate><description><![CDATA[一、首先是Showcase

效果  传送门

二、如何实现

既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。


&amp;lt;TabsControl&amp;gt;
  &amp;lt;Tab name=&quot;red&quot;&amp;gt;
    &amp;lt;div className=&quot;red&quot;/&amp;gt;
  &amp;lt;/Tab&amp;gt;
  &amp;lt;Tab name=&quot]]></description><category></category></item><item><title><![CDATA[reset.css]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83541523</link><guid>https://blog.csdn.net/twinkle_J/article/details/83541523</guid><author>twinkle_J</author><pubDate>Tue, 30 Oct 2018 14:38:44 +0800</pubDate><description><![CDATA[/* reset */

html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu{

margin:0;p...]]></description><category></category></item><item><title><![CDATA[vue源码解读（一）]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83507198</link><guid>https://blog.csdn.net/twinkle_J/article/details/83507198</guid><author>twinkle_J</author><pubDate>Mon, 29 Oct 2018 15:57:45 +0800</pubDate><description><![CDATA[vue源码的目录结构



vue源码根目录下有很多文件夹，以下是各文件夹存放的文件说明

Vue

    |— build 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。

    |— dist 打包之后文件所在位置

    |— examples 部分示例

    |— flow 因为Vue使用了Flow来进行静态类型检查，这里定义了声明...]]></description><category></category></item><item><title><![CDATA[webpack4：从0配置到项目搭建]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83376783</link><guid>https://blog.csdn.net/twinkle_J/article/details/83376783</guid><author>twinkle_J</author><pubDate>Thu, 25 Oct 2018 11:20:23 +0800</pubDate><description><![CDATA[webpack4：从0配置到项目搭建

webpack4发布以来，我写项目都是用脚手架，即使再简单的项目，真的是really shame。。虽然道听途说了很多 webpack4 的特性，却没有尝试过，因为它给人的感觉就是，em...很难。但是今天我从最简单的部分开始，一点点搭建起一个项目。

0配置，配置了什么

让我们从0开始，新建一个项目，在终端执行以下语句：


mkdir webpack-...]]></description><category></category></item><item><title><![CDATA[react ssr 服务器端渲染(一)]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83343272</link><guid>https://blog.csdn.net/twinkle_J/article/details/83343272</guid><author>twinkle_J</author><pubDate>Wed, 24 Oct 2018 14:13:25 +0800</pubDate><description><![CDATA[服务器端渲染的特性：页面上的内容在服务器上生成好了，浏览器从服务器上拿到内容，然后在页面上显示

 



客户端渲染与服务器端渲染流程



客服端渲染不利于SEO（搜索引擎优化，网站排名）...]]></description><category></category></item><item><title><![CDATA[前端架构师成长之路]]></title><link>https://blog.csdn.net/twinkle_J/article/details/83269203</link><guid>https://blog.csdn.net/twinkle_J/article/details/83269203</guid><author>twinkle_J</author><pubDate>Mon, 22 Oct 2018 10:23:50 +0800</pubDate><description><![CDATA[前两天公司领导对员工进行岗位职责边缘划分，老大问我：“未来职场规划？”，我说：“我想成为全栈工程师！”。虽然我在公司一直做前端开发，但是作为前端工程师我总是妄自菲薄感觉自己像个门外汉，技术太浅登不得大雅之堂。所以一直想学一门后台语言，我就可以参与到公司数据结构的设计，继而进入公司核心领导层（晋职加薪~哈哈!）。而不是像现在一样“大事决定不了，小事帮不上忙~”。老大说：“一法通，万法通。把一门编程语...]]></description><category></category></item></channel></rss>