For example we have the following code: const TodoList = (props) => ( <div className="Todo-List"> <ul> {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)} </ul> </div> ) Because we wrote as functio…

Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ render() { return <Text>{this.props.title}</Text> } }) 后来有了ES6 class Heading extends Component { render() { return <Text>{this.props.title}…

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes! withState: const Statue = withState('sho…

上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component来快速创建组件.例如下面代码所示: import React from 'react'; const Button = ({ day, increment }) => { return ( <div> <button onClick={increment}>Today i…

We can use 'displayName' on component to change its component tag in dev tool: import React from 'react'; import {FooterLink} from '../containers' export const Footer = () => ( <p> Show: {' '} <FooterLink filter="all">All</Foot…

React Native终于展示的UI全是Native的UI.将Native的信息封装成React方便的调用. 那么Native是怎样封装成React调用的?Native和React是怎样交互的? ViewManager UI组件:将Native的UI暴露出来供JS调用. Native组件封装成JS组件供JS调用.这里的一个问题是怎么将Native中的属性用在JS中.以及属性能够有哪些类型的?能够先思考一下. 以下Native的代码自己定义了一个View并定义了一个变化的属性color. pub…

用DEBUG启动项目,项目中打断点的,然后会报异常 解决方法: 第一步: 项目-->Java编译器-->Classfile Generation 复选框 全部勾选 第二步: 替换当前文件运行的JRE为sun提供的,不能是Eclipse自带的JRE Window--->preferences---->java---->Installed JREs--->非EC的JRE…

今天学习了react中的函数子组件的概念,然后在工作中得到了实际应用,很开心,那么好记性不如烂笔头,开始喽~ 函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者. FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢? 分两步走 第一步:class FetchDataParent import * as React from 'react' import { get } from '../../common/…

设置DEBUG, 使用宏定义: #if DEBUG NSLog(@"debug model"); #else //执行release模式的代码 #endif…

The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid unexpected ref behaviour. The technique of forwarding refs really starts to shine in combination with…