（1）内联样式注：样式要采用驼峰命令发，如果非要使用原生css样式写法，需加引号缺点：一些动画，伪类不能使用class App extends Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {const styleCss = {header : {color: ‘red‘,backgroundColor: ‘#ccc‘,"padding-top": ‘20px‘,paddingBottom: ‘20px‘}}return (<div className="App"><p style={styleCss.header}>这是一段文字，哈哈...
## 函数组件目的：React团队希望，组件不要变成复杂的容器，最好只是数据流的管道，开发者可以根据需要组合管道。**完全不使用类就能写出一个全功能组件** React很早就支持函数组件 function Welcome(props) {return <h1>Hello, {props.name}</h1>; } 这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。 ## HooksReact核心思想是将页面拆成一堆独立的、可复用的组件，并且用自上而下的数据流...
react-router: 它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。 用法：子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。 组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定，即URL的#部分发生变化。举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。<Router routes={routes} history={browserHistory}...
It it recommeded that when deals with form component, we can create a container component to hold state, and then create a stateless component to enpower the form.For example:In the example has two components, one is container component ‘meal.component.ts‘, another is statless component ‘meal-form.component.ts‘. For the container component, it talks to service:import {Component} from ‘@angula...
Quick Start Guide: Reactive Tweets快速入门指南： Reactive Tweets(reactive tweets 大概可以理解为“响应式推文”，在此可以测试下GFW是否还在正常工作 Twitter)A typical use case for stream processing is consuming a live stream of data that we want to extract or aggregate some other data from. In this example we‘ll consider consuming a stream of tweets and extracting information concerning Akka from the...
安装node js npm config set registry ‘http://registry.npm.taobao.org‘npm config list 可以查看配置npm install webpack -g 全局安装webpacknpm install webpack --save-dev 对单个项目进行webpack的安装；mkdir react-webpack 创建目录；cd react-webpack 切换到该目录下npm init 自定义创建package.jsonnpm init -yes 可以创建默认的package.json3.添加依赖包级插件npm install webpack --save-devnpm install react react-...
events.js:183 throw er; // Unhandled ‘error‘ event。。。ENOSPC。。。解决方法：命令行执行如下内容，避免ENOSPC错误：echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
hook组件初渲染hooks组件在初次渲染时，解析组件类型，判断是Function还是class类型，然后执行对应类型的处理方法判断到当前是Function类型组件后，首先在当前组件，也就是fiberNode上进行hook的创建和挂载，将所有的hook api都挂载到全局变量dispatcher上顺序执行当前组件，每遇到一个hook api都通过next将它连接到当前fiberNode的hook链表上hooks api 挂载在初始渲染时，currentDispatcher为空，就会先将所有hook api挂载到当前f...
第一次用 紧张 慌我每次使用新技术都特别慌 又激动又心慌注意点 createStore 只能有一个 需要 subscribe 才能触发 先上两点 原文：https://www.cnblogs.com/qingcui277/p/12337360.html
本文建议使用yarn进行环境搭建和后续项目启动之类的安装yarnnpm -g install yarn // -g代表全局安装接下来，使用yarn进行安装// 初始化项目 create-react-app imooc // 添加antdyarn add antd // 使用react-app-rewired customize-cra就不用暴露webpack等配置文件 yarn add react-app-rewired customize-cra -D // 安装less相关 yarn add less less-loader babel-plugin-import -D修改一下package.json里面 “scripts”，且需要添...
React Native基于node.js的Model环境，使用React的UI环境，的一套跨平台方案。现实方案可能是，基于node.js的Model环境，基于各个平台的UI环境。ios 环境安装1.安装nvmhttps://github.com/creationix/nvm#installation2.安装nodenvm install 5.3.0nvm alias default node3.安装 watchmanbrew install watchman4.安装 flow（js静态检查）brew install flow5. npm install -g react-native-clireact native 的命令行工具6.创建工程re...
react + TS + d3.js 实现曲线图 报错问题解决1. 结构1.1 整体结构// lemon import React, { useRef, useState, useEffect, useReducer } from "react"; import * as d3 from "d3"; interface Data {} const SimpleLine: React.FC = () => { const ref = useRef<SVGSVGElement>(null); useEffect(() => {}); return ( <> <svg ref={ref}></svg> </> ); }; export { SimpleLine }; 1.2 SimpleLine函数组...
一、什么是Flux Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰。 二、flux的基本概念 (1) 、Flux由4部分组成 1、View：视图层 2、Action(动作)：视图发出的消息(比如mouseClick) 3、Dispatcher( 派发器 ) ：用来接收Action、执行回调函数 4、Store(数据层)：用来存放应用的状态，一旦发生改动，就提醒View更新页面 (2)、Flux的流程 1、...
一、变量state和变量修改setStatestate修改后，页面也会跟着响应，更新state需要使用setState。// 初始化statethis.state = {count: 0 } // 更新statethis.setState({count: this.state.count + 1 })注意：1.setState是异步的，同一个生命周期里会批量操作更新state，这会导致一个问题，在某个生命阶段，我们setState了某个值，但是在这个阶段我们再去获取到的其实还是原本的值，只有在生命周期结束后才会真正更新完成。解决办法：...
在移动开发中，动画能有效的提高用户体验。在 React Native 中，也有相应的 API 供我们做动画。这里着重说一下 Animated 动画库，它可以让我们非常简便的去实现各式各样的动画和交互方式，而且具备很高的性能。Animated 目前只封装了四个可以动画化的组件：View、Text、Image、ScrollView，不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件。 话不多说，我们来举个栗子：步骤拆解1、创建 Animated.Value，设...