react基础学习

最新推荐文章于 2025-08-18 19:35:30 发布

转载最新推荐文章于 2025-08-18 19:35:30 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/diwangtaotao/p/6478313.html

文章标签：

#ui #javascript #数据结构与算法 #ViewUI

什么是react:React（有时称为React.js 或ReactJS）是一个为数据提供渲染HTML视图的开源JavaScript库;
其特点：
声明式设计：采用声明范式，可以轻松描述应用
高效：通过对DOM的模拟，最大限度减少与DOM的交互
灵活：可以方便的搭配其它库来使用
JSX：是js语法的扩展
组件：构建组件，方便复用
数据：单向相应的数据流
核心思想：封装组件
劣势与缺点：（地上不是没有坑，走的人多了也就踩出来了）
在你选择之前需要再考虑一下：
①一开始 React 会极大地减慢你的开发。理解props、state以及组件通信如何工作并不是很简单，并且文档信息错综复杂。理论上，这将会被克服，你的整个团队都上道之后，开发速度上就会有一个很大的提升。
②React 不支持 IE8 以下的任何浏览器，以后也绝不会。
③如果你的应用/站点不需要频繁的动态页面更新，你可能为了很小的功能而编写大量的代码。
④你会改造很多轮子。React 很年轻，并且因为没有权威的方式来处理事件、组件通信，你必须从零开始创建大量的组件库。你的应用是否有下拉菜单，可调整大小的窗口，或者 lightbox？你同样必须从零开始写这些。
搭建React的开发环境：引入react.js react-dom.js browser.js 三个js文件
基本语法：jsx语法
遇到HTML标签（以 < 开头），就用HTML来解析；
遇到代码块（以 { 开头）就用js来解析

创建组件（目前感觉有点面向对象的思想，感觉构造函数更像）

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
React.createClass 方法就用于生成一个组件类

复杂一点的复合组件：将其他的组件整合在一起创建的新组件积木+积木--》乐高机器人
引用组件：

　
props属性对象

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMsg name="daxu"> ，就是 HelloMsg 组件加入一个 name 属性，值为 daxu。
组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

基本用法：

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
ref属性：
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。
根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
状态state:

介绍：
组件免不了要与用户互动，React的一大创新，就是将组件看成是一个状态机，
一开始就有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI。
具体实现起来，React里有个state，只要更新组件的state，
然后根据state重新渲染用户界面（不要操作DOM），React来决定如何最高效的更新DOM。

方法：

方法1：getInitialState 定义初始状态，也就是一个对象
方法2：setState 可以获取getInitialState中定义的对象，
如果调用setState修改了状态值，
每次修改后，都将自动调用this.render方法，再次渲染组件
读取状态：this.state.name this.state.age....
生命周期：

阶段：
Mounting 已经插入真实DOM
Updating 正在被重新渲染
Unmounting 已经移出DOM

处理函数：

componentWillMount() 准备插入
componentDidMount() 已经插入
componentWillUpdate(object nextProps, object nextState) 准备更新
componentDidUpdate(object prevProps, object prevState) 已经更新
componentWillUnmount() 准备从DOM中移除。

注意：ref 的使用必须是在componentDidMount之后；update相关的处理函数是有参数的
事件：
React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。
组件createClass后创建的是许多方法组成的对象。
组件中使用的方法分为React自有的方法与用户定义的方法。
①其中React自有方法是组件生命周期中的方法，
如：render、componentWillUpdate、componentDidMount等。
②用户自定义的方法可以起符合JS命名规范的方法就可以（最好使用驼峰命名），
如：handleClick、handleChange、handleMouseover等。
表单：
状态属性：
表单元素有这么几种属于状态的属性：
value，对应 <input> 和 <textarea> 所有，
checked，对应类型为 checkbox 和 radio 的 <input> 所有，
selected，对应 <option> 所有

对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件
一个受控的表单组件，它所有状态属性更改涉及 UI 的变更都由 React 来控制（状态属性绑定 UI）
如果你希望输入的内容反馈到输入框，就要用 onChange 事件改变状态属性 value 的值
使用这种模式非常容易实现类似对用户输入的验证，或者对用户交互做额外的处理。