TAT.rocket Styled Components:让样式也成为组件
In Web开发 on 2017年05月15日 by view: 13,184
2

前言

为了应对越来越复杂的 web 应用,组件化应运而生,React、Vue 等组件化框架使我们的程序更简单更加可维护。在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流,人们开始考虑使用 JS 上编写 CSS,styled components 就是其中一种解决方案。styled components 是一个 React 第三方库,作用是可以将样式写成组件的形式,实现在 JS 上编写 CSS。

一. 前言

当我们选择使用 Node+React 的技术栈开发 Web 时,React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处

        1. 利于 SEO:React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构,方便 Google 等搜索引擎的爬虫能爬到网页的内容。

        2. 提高首屏渲染的速度:服务器直接返回一个填满数据的 HTML,而不是在请求了 HTML 后还需要异步请求首屏数据。

        3. 前后端都可以使用 js

二. 神奇的 renderToString 和 renderToStaticMarkup

有两个神奇的 React API 都可以实现 React 服务器渲染:renderToStringrenderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包,都接受一个 React Component 参数,返回一个 String。

也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:

TAT.rocket 总结伪类与伪元素
In CSS3 on 2016年05月09日 by view: 17,967
13

熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

1. 伪类与伪元素

先说一说为什么 css 要引入伪元素和伪类,以下是 css2.1 Selectors 章节中对伪类与伪元素的描述

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

 

TAT.rocket ReactJS 组件间沟通的一些方法
In Web开发 on 2016年01月13日 by view: 23,924
5

刚入门 React 可能会因为 React 的单向数据流的特性而遇到组件间沟通的麻烦,这篇文章主要就说一说如何解决组件间沟通的问题。


 

1. 组件间的关系

1.1 父子组件

ReactJS 中数据的流动是单向的,父组件的数据可以通过设置子组件的 props 传递数据给子组件。如果想让子组件改变父组件的数据,可以在父组件中传一个 callback(回调函数) 给子组件,子组件内调用这个 callback 即可改变父组件的数据。

TAT.rocket 使用 js 实现思维导图
In JavaScript,Web开发,作品 on 2015年08月28日 by view: 13,833
2

本文主要阐述使用 js 实现思维导图的关键技术点,如果还不知道什么是思维导图的同学,请自行度娘。以下是 demo 和源码的传送门:
demo:http://rockyren.github.io/mindmaptree/
源码:http://github.com/RockyRen/mindmaptree/tree/master

在源码中我使用了 svg 绘制思维导图。与 canvas 相比,svg 将图像当成对象,我们可将思维导图中节点和线等图形表现为对象,而且 svg 更适合用于动态交互的应用