React介绍,可了解看看

React介绍,可了解看看

1.声明式设计 React采用声明范式,可以轻松描述应用
2.高效 React通过对DOM的模拟,最大限度地减少与DOM的交互
3.JSX 是JavaScript 语法的扩展。React开发不一定使用 JSX ,但我们建议使用它
4.组件 通过 React 构建组件,使得代码更加容易得到复用
5.单向响应的数据流 React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单
React的类
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染
ReactDOM.render(…) 是渲染方法,所有的 js,html 都可通过它进行渲染绘制,他有两个参数,内容和渲染目标 js 对象,内容就是要在渲染目标中显示的东西,可以是一个 React 部件,也可以是一段HTML或TEXT文本。渲染目标JS对象,就是一个DIV, HTML的节点对象。
ReactDOM.render(, div);
unmountComponentAtNode() 这个方法是解除渲染挂载,作用和 render 刚好相反,也就清空一个渲染目标中的 React 部件或 html 内容 ReactDOM.unmountComponentAtNode(div);
通过 npm 使用 React
如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。
我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack
国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
create-react-app 自动创建的项目是基于 Webpack + ES6
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

2.React 元素渲染
元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容 ,与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象。
在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 “根” DOM 节点,用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点,更新元素渲染React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的,目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值