摘要: react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体的行为取决于根节点的类型。 1.不同类型的元素 如果树的根元素是不同的类型,那么React会拆掉整个 阅读全文
posted @ 2017-09-27 19:54 QxQstar 阅读(1260) 评论(0) 推荐(0) 编辑
摘要: 组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的children,尤其是像Sidebar和Dialog这通用'boxes'的组件。在这些组件中,我们推荐 阅读全文
posted @ 2017-09-23 18:15 QxQstar 阅读(5957) 评论(0) 推荐(1) 编辑
摘要: 代码如下: 阅读全文
posted @ 2017-09-17 20:14 QxQstar 阅读(582) 评论(0) 推荐(0) 编辑
摘要: 通常,一些组件需要反映相同的数据更改,这种情况推荐将共享state移动到它们最近的公共祖先上。 在这里有一个例子:有一个温度计算器计算在给定温度是否能让水沸腾,用户可以输入华氏温度也能输入摄氏温度,当改变一种温度时另一种温度也要跟着改变在这里摄氏温度输入框的值与华氏温度输入框的值要相互关联,所以这两 阅读全文
posted @ 2017-09-17 10:22 QxQstar 阅读(847) 评论(0) 推荐(0) 编辑
摘要: 在React中HTML的from元素与其他的DOM元素有些不同。因为表单元素自然而然的会有一些内部状态 一.controlled components 在HTML中,像input,select,textarea这些表单元素都会维持自己的状态,并且会基于用户输入更新状态。在React中,易变的状态通常 阅读全文
posted @ 2017-09-16 20:08 QxQstar 阅读(491) 评论(0) 推荐(0) 编辑
摘要: 在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分。 一.用变量存储元素 可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素 二.阻止组件渲染 在少数情况下,你可能想让组件隐藏它自己而非被渲染到其他组件中,可以通过return null达到这种效果 在 阅读全文
posted @ 2017-09-16 15:03 QxQstar 阅读(235) 评论(0) 推荐(0) 编辑
摘要: 1.绑定在React元素上的事件与绑定在DOM元素上的事件非常相似,但是也有一个不同的地方 React事件使用驼峰命名法命名 在React中不能通过使用return false阻止事件的默认行为,必须显示的调用event.preventDefault()去阻止默认行为 2.React中的event。 阅读全文
posted @ 2017-09-16 10:01 QxQstar 阅读(402) 评论(0) 推荐(0) 编辑
摘要: 在React——组件中介绍过组件有两种定义方式:函数形式以及类形式。但是要想在组件中使用state,就必须使用类形式定义组件。 组件中的state是组件私有的,完全由组件自己控制。 使用类形式定义一个Clock组件 上面的代码中,在构造函数中初始化state 构造函数应该以props作为参数 将Cl 阅读全文
posted @ 2017-09-16 09:36 QxQstar 阅读(591) 评论(0) 推荐(1) 编辑
摘要: 一.创建组件 在React中有两种创建组件的方式,分别是函数形式的组件和类形式的组件 在下面都是以函数形式的组件为例 在页面中显示自定义组件 执行这段代码在页面中会显示:this is a page ,li! 解释上述代码: 1.将<Welcome name='li'/>作为ReactDOM.ren 阅读全文
posted @ 2017-09-16 08:50 QxQstar 阅读(176) 评论(0) 推荐(0) 编辑
摘要: 一.将表达式嵌套在JSX中 要在JSX中内嵌js表达式只需要将js表达式放在{}中,例如: 二.JSX也是表达式 在编译之后Jsx会成为一个常规的js对象。所以可以在if,for语句中使用Jsx,例如 注:使用jsx时,标签之间的内容会被当作字符串({}中的会被当作js语句),如 三.使用JSX给元 阅读全文
posted @ 2017-09-16 08:37 QxQstar 阅读(376) 评论(0) 推荐(0) 编辑