React Native采用一中全新的布局方式：FlexBox（弹性布局）。可以很方便的实现各种复杂布局，是全新的针对web和移动开发布局的一种实现方式。何为FlexBox? 完整名称为：the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件。Flexbuju的主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。 在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyConte...
表单控件：input 文档在介绍控件之前，先提到了react组件自身的一个特点：状态由state掌控，改变组件状态只能用setState方法。而在html的表单里，input、radio、checkbox、select的值都是随用户输入改变的。要创建一个React的表单控件，也就是用React的方式创建表单组件：<label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label>在input控件中，value值就是一个状态state.value。当...
最近做一个H5项目，数据交互量比较大，很多页面都是从后台拿过来数据做一个列表显示，这自然就遇到了滚动。刚开始我直接使用css做法，直接添加overflow: scroll;但在微信端用户滑动会直接将整个页面拖动，露出顶部的域名和底部的黑色背景。用户反映体验不好，要改……好吧，自己动手。但这并不是好改的，因为在React中都是构建的是虚拟DOM，直接操作DOM也会对性能有一定影响。这时候网上搜了一下，拿出一个解决方案，献出部分代码：...
1. Node和NPM 版本 2. 脚手架在对React比较熟悉之前，为了避免陷入到开发工具的繁琐配置中，借助react官方提供的脚手架工具Create React App来搭建React应用npx create-react-app my-react创建一个react应用，根目录文件夹名为my-react.原文：https://www.cnblogs.com/pangkang/p/11594834.html
（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...