Ronychen的博客

什么是 JSXJSX 是 ECMAScript 一个类似 XML 的语法扩展。基本上，它只是为 React.createElement() 函数提供语法糖，从而让在我们在 JavaScript 中，使用类 HTML 模板的语法，进行页面描述。JSX编译（babel）由于JSX是javascript的一种扩展，所以这就直接决定了浏览器不能像天然支持js一样支持jsx，所以jsx需要被编译后才能被识别，这个编译工作正是由Babel来实现的我们先来看个简单的JSX demo，看看经过babel的编译他会变

HookHook 是 React 16.8 的新增特性。它可以让你在不编写 class类组件 的情况下使用 state 以及其他的 React 特性import React, { useState } from 'react';function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>

今天我们单独聊一聊React中组件之间的传值问题！！！一、父组件向子组件传值//父组件class App extends React.PureComponent<AppProps> { render() { return ( <div> <Title title="标题" type="food" url="http://www.baidu.com" /> </div> ) }.

一、简单介绍是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。二、优点三、安装与部署直接script标签引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>通过

一、简介（背景）1.1、概念它是一个将数据渲染为HTML视图 的js库1.2、原生js痛点用dom的API去操作dom，繁琐且效率低用js直接操作dom，浏览器会进行大量的回流和重绘原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能1.3、React特点采用组件化模式，声明式编码，提高开发效率和组件复用性在React Native中可以用react预发进行安卓、io

概述react-redux是redux官方出的，用于配合react的绑定库，它能够使你的react组件从redux store中很方便的读取数据，并且向store中分发actions，以此来更新数据，它有两个很重要的成员：Provider、connect：Providerconnect小案例解说案例需求： 一个按钮，点击加1，下方显示数字，默认0案例思路：项目中下载redux、react-redux新建两个组件（ComA、ComB)新建store文件和reducer文件然后用re

一、概述1.1、概念理解：redux可以理解为就是一个js容器，用于全局的状态管理1.2、三大核心单一数据源整个应用的state被存储在一颗object tree中，并且这个object tree只存在于唯一一个storestate是只读的唯一能改变state的就是action,action是一个用于描述已发生事件的对象,通过store中的dispatch方法来发送actionstorte.dispatch({type:‘add’})使用纯函数（reducer）来执行

一、基础入门1.1、首先你需要通过在终端安装一个叫prop-types的第三方包；npm install prop-types1.2、然后通过下面的写法对你的某一个组件的道具中的变量进行类型检测：yourComponent.propTypes = { 属性1：属性1的变量类型， 属性2：属性2的变量类型 //...}二、使用全解2.1利用propTypes...

前言如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳，那么这只蚂蚁从绳头爬到绳尾，就会依次触动不同的卡片挂钩。在React每一个生命周期中，也有类似卡片挂钩的存在，我们把它称之为‘钩子函数’。那么在React的生命周期中，到底有哪些钩子函数？React的生命周期又是怎样的流程？今天我给大家来总结总结React 生命周期流程图如图，React生命周期主要包括三个阶段：初始化阶段、...

1、Redux-Devtools调试工具下载方式一：去谷歌应用商店搜索redux-devtools直接安装即可，但又一个前提条件（需要翻墙，这里不考虑）；方式二：可以去chrome插件网下载，下载地址为：http://chromecj.com/web-development/2018-03/931/download.html，下载过程需要关注公众号，发送插件即可得到验证码进行下载；2、安装过...