React源码笔记——jsx为何物

jsx 为何物

最近开始看点 React 的源码,想找点地方输出一些笔记。以前写过 Reactjsx,如果对 jsx 不太熟悉或者想回忆回忆的可以移步去看看。

用了那么久的 Reactjsx 简直就是天天打照面的了。然鹅用得再熟,还是只是停留在形而上而已,像面试的时候,被问到 jsx 的本质是啥?还能不假思索说出是一个 js 对象,那这个对象怎么来的,是通过什么方式拓展了 js 这种类似 html 语法的能力的,就开始支支吾吾了。为了知其然知其所以然,也为了能满足自己的好奇心,我不由得想像小时候拆电话一样拆开 React 的源码一探究竟。最后拼回去还能不能打电话就不是我考虑的事了(老爸对不起,我下次不敢了)。

阅读更多

Koa2+MongoDB+React撸个即时聊天web应用(上)

学习了Koa2MongoDB之后,突然就想着撸个实战项目出来看看,想来想去,还是搞个即时聊天应用出来玩玩吧。

项目的所有源码已经放到Github
我也把最终的效果放到线上服务器了摸鱼俱乐部聊天室

前端部分我使用了React来搭建界面,因为工作用的都是Vue,感觉再不用用React就要生疏了……

这篇文章主要讲述前端部分代码的编写,这里我使用的是create-react-app脚手架来搭建项目。

阅读更多

十分钟,带你了解React 16.8的useState和useEffect

HooksReact 16.8新增的特性,并且他是向后兼容的,facebook也坦言没有计划会在React中移除class组件。你完全可以不使用hooks,一直使用class组件。

概念

React hooks允许你在非class组件中使用stateReact其他的特性:propscontextrefs 以及生命周期
Hook本质上是一些函数,可以在函数组件中“钩入”其他React的特性,使得你不用使用class也可以使用React。值得注意的是,hooks是不能在class组件中使用的。

阅读更多

走进React——jsx

用React开发时,最具标识性的,估计就是jsx语法了。它并不是HTML,也不是字符串,官方称之为——一个javascript的语法拓展。在用react开发中,个人感觉jsx能极大地提升开发者的开发体验。在传统的开发中,都提倡将视图与逻辑文件分离,而React则是通过一个称之为“组件”的东东来存放视图和逻辑,将业务拆分为一个个的小模块,更多组件的概念在后续的文章中也会放出来跟大家探讨。

开始前先说几句

本次所有示例的代码的html结构都如下

1
<div id="root"></div>

ok,交代完毕,开始步入正题。

阅读更多

走进React——React的样子

React是一个可以快速构建响应式界面的UI库,基于组件化开发,可以让你的数据与界面很大程度的解耦,让你能只专注于数据,而不用去操心界面的展示。同时他也可以通过不同的渲染器来渲染你的react范式的代码,譬如react-native,他可以让用”react范式”写出原生应用,运行在各种移动设备中。

react的样子

其实react代码的样子很纯粹,纯粹到让你惊呼,这不就是html+js吗?是的,没有隔壁vue家的模板和众多的api,熟悉一下jsx,知道组件的生命周期钩子,你就可以用上手写出一下小应用了
一般来说,react组件经常使用jsx来编写,他的样子常常像下面这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// jsx
// 思考题,这里好像没用到“React”,那么可以不用引这个库了吗?只用“Component”行不行?
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

default class Test extends Component{
render(){
return (
<div>{this.props.test}</div>
)
}
}

ReactDOM.render(
<Test test="一串字符" />,
document.querySelector('#root')
);
阅读更多