标签·React学习笔记

React学习笔记——深入React组件(v15.5) ❦  2017-05-04
[TOC] 组件让UI独立，可重复利用，并且单独解决每块问题。React.Component是由React提供的。 React.Component是一个抽象的基类，因此它很少的被直接使用。反而，你会用一个有代表性的子类，并且至少定义一个render()方法。 使用JavaScript定义一个简单的类组件： class Greeting extends ..

React学习笔记——使用PropTypes类型检查(v15.5) ❦  2017-05-03
[TOC] React v15.5中React.PropTypes已经被废弃了，建议使用prop-types库代替。 随着应用的增长，可能遇到越来越多的类型检查方面的bug，对于一些应用，你可以使用JavaScript的扩展如：flow、typescript来检查你整个应用。但是，对于React来说，即使你不使用这些，其也内置了一些类型检查能力。要使用类..

React学习笔记——引用和DOM(v15.5) ❦  2017-05-03
[TOC] 在典型的React数据流中，props是父组件与子组件交互的唯一方式。想要修改子组件的，你需要重新渲染父组件的props。然而，有一些种情况是你需要在典型数据流的外面立即修改子组件。要修改的子组件可以是React组件的实例或者是一个DOM元素。对于这两种情况，React 提供了一个解决方案。 何时使用Refs 1、管理焦点、选中或者是媒..

React学习笔记——深入理解JSX(v15.5) ❦  2017-05-02
[TOC] 从根本上讲，React语法仅仅是React.createElement(component, props, …children)方法的语法糖。 //JSX代码 <MyButton color="blue" shadowSize={2}> Click Me </MyButton> //编译后： ..

React学习笔记——提升state(v15.5) ❦  2017-04-25
[TOC] 通常几个组件需要反映相同数据变化，我们推荐提升共享的state到它们最近的共同祖先元素。实现如下： 创建一个温度计算器来计算，给定温度的水是否会沸腾。 我们将从一个BoilingVerdict组件开始，它接收一个celsius作为prop参数，并且打印水温度。 function BoilingVerdict(props) { ..

React学习笔记——组合与继承(v15.5) ❦  2017-04-25
[TOC] React有一个强大的组合模型，并且推荐组合代替继承，在组件间重用代码。 一些组件不能提前知道它们的子组件。它些问题在一些公共组件尤其明显。如：侧边栏或者弹出框等组件。 我们推荐这样的组件使用prop的特殊属性children，直接传递子元素到它们的输出中。 function FancyBorder(props) { retu..

React学习笔记——表单(v15.5) ❦  2017-04-24
[TOC] React中的HTML表单元素有点不同于其它DOM元素，因为表单元素天生具备一些内部状态。 <form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" ..

React学习笔记——列表和Keys(v15.5) ❦  2017-04-21
[TOC] 渲染多个组件 你可以创建一个元素集合，通过‘{}’在JSX中使用 //创建元素集合 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); //使用集..

React学习笔记——条件渲染(v15.5) ❦  2017-04-21
[TOC] React条件渲染和JavaScript的条件工作方式是一样的。 使用JavaScript中if或者条件运算符来创建一个代表当前状态的元素，然后让React来更新匹配的UI。 //创建登陆用户后组件 function UserGreeting(props) { return <h1>Welcome back!&..