React的起源
React起源于facebook公司工程师开发时的一个bug,三个消息提示图标右上角的数字显示实时未读消息的数目,过多的操作容易产生问题。
工程师很轻易的排查并解决的bug,但是他们不满足于这个小问题的解决,开始思考出现这种错误背后的原因:
1、传统开发存在问题
- 过多关注操作界面的细节,同时需要借助jQuery来操纵大量原生DOM
- 数据是分散的,不利于管理维护
2、解决方法
- 组件化划分
- 以jsx维护UI样式
- 数据集中管理,state来储存组件内部状态,发生变化时再重新渲染页面
3、React特点
- 声明式编程:UI=F(state)
F就是render函数- 命令式编程:描述详细路径,例如:一步一步执行for循环
- 声明式编程:告知目的地,例如:map函数直接告诉程序想要什么
- 组件化开发
- 多平台适配
React开发依赖
1、依赖三个库
- react:核心库,提供核心函数、类
- react-dom:根据端(web/native)不同,渲染为不同的组件
- babel:将jsx语法解析为js语法,将es6语法解析为js5语法
开始只有react库, 后来为了区分web和native,将web和native的核心代码从react中分离出来成为react-dom
- web端:react-dom会将jsx最终渲染成真实dom,显示在浏览器中
- native端:react-dom将jsx渲染成原生控件(比如安卓中的Button和IOS中的UIButton)
2、引入三个库
方式一:html文档头引入三个库
<!-- 安装依赖 -->
<!-- crossorigin允许远程跨域版本的错误信息在本地也显示出来 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
方式二:本地下载react包并引入
方式三:使用npm包管理工具安装react脚手架
React初体验
开发如下小页面:h2标签展示文字Hello World,点击按钮改变文本,Hello World变为Hello React
1、babel使用
需要配置script标签属性为type="text/babel"才可以识别jsx语法
<script type="text/babel"></script>
2、react-dom使用
使用react-dom库中ReactDOM.render函数,将编写的React组件挂载到页面上
第一个入参为:React组件,使用jsx语法
第二个入参为:要挂载到的DOM容器,注意是以替换方式挂载,原来<div id="app"></div>
内容会被替换掉
第三个入参为:回调函数,可选,可有可无
<body>
<div id="app"></div>
<script type="text/babel">
let message = "Hello World";
const handleBtnClick = () => {
message = "Hello React";
};
ReactDOM.render(
<div>
<h2>{message}</h2>
<button onClick={handleBtnClick}>改变文本</button>
</div>,
document.getElementById("app")
);
</script>
</body>
存在问题:点击按钮,message改变,但是页面不会重新渲染,所以需要使用react库来管理数据
3、react使用
引入React.Component
类作为组件App的父类
- App类继承父类的render方法,该方法返回一个jsx语法写的html标签,与ReactDOM.render配合使用
- App类继承父类的setState方法,修改数据后启动页面重新渲染