react学习文档：https://www.reactjscn.com/
React起源于Facebook的内部项目，因为该公司对市面上所有的JavaScript MVC框架都不满意就决定自己写一套，用来架设Instagram网站。做出来的以后发现这套东西好用，就在2013年5月开源了
React 特点
1.声明式设计：采用声明范式，可以轻松描述应用jsx
2.高效：通过对DOM的模拟，最大限度地减少与DOM的交互
3.灵活：可以与已知的库或框架很好地配合
4.数据驱动
5.单项数据流
6.组件化开发
组件
组件是 UI（网页）界面的一部分 React应用UI的构建块，这些组件将整个UI分成小的独立并可重用的部分，每个组件彼此独立，而不会影响UI的其余部分
优点：
1.方便代码重用
2.便于代码管理
3.便于团队协作
React的理解
react是构建用户页面的avascript库不是框架 React中路由Router 状态Redux axios 都是需要下载而框架是集成的不需要下载直接使用
安装React脚手架
cnpm install create-react-app -g 全局安装环境
安装yarn
特点：下载 速度超快，Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快
cnpm install yarn -g 全局安装
可以使用yarn 快速下载模块： yarn add 模块名
同时可以用yarn启动项目：yarn start
使用React脚手架创建项目
create-react-app 项目名称
脚手架搭建的项目包含以下文件：
.git 版本管理
node_modules 依赖模块
public 静态文件
src 写源码的文件夹
App.js App组件
App.css App组件的样式文件
App.test.js 测试文件
index.css 全局样式文件
index.js 入口文件
创建组件
1.函数方式创建组件
import React from "react"; //引入React模块
import "./top.css" //引入组件样式
function Top(props){ //通过函数创建了一个组件名称为Top ; （props)接收外部传入的数据
return ( //返回React元素 是原生DOM组件的表示
<div className="top">
<h3> { props.title } </h3>
</div>
)
}
export default Top // 导出当前创建好的Top组件
组件内部视图只能有一个顶级元素
标签内部的class属性要换成className 目的：不与Es6 class类函数起冲突
渲染组件:
<组件名 id="" title=""><组件名 >
2.通过类创建的组件
import React, {Component}from 'react'; //引入React模块
class City extends Component { //通过类创建组件名为City的组件
constructor(props) { //constructor 构造方法 构造函数本身
super(props); // super(props)接收父组件传递的参数
}
render() { //每个组件强制必须有一个render（），它返回React元素 是原生DOM组件的表示
return (
<div> {this. props.title } </div> //this.props 接收父组件通过属性传递的值
);
}
}
export default City; // // 导出当前创建好的Top组件
特点：
1.组件传值 ：父组件通过属性传值 子通过this.props.属性名接收
2.状态：声明式渲染
3数据：数据驱动
创建好的组件引入根组件App.js
import React from 'react'; //引入React模块
import './App.css'; //引入App组件样式
import Top from "../top/Top"; //引入Top组件
import City from "../city/City" //引入City组件
function App() {
return (
<div className="App">
<Top title="aaaaaaaaaaaaaaaa" ></Top> //Jsx语法： 组件标签的首字母大写 跟html标签区分 组件是可以重用的根据传入不同的属性值，呈现不一样的主体内容
<Top title="标题2222222222222" ></Top>
<Top title="标题333333333333" ></Top>
<Top title="标题444444444444" ></Top>
<City title="当前城市：落山鸡" ></City >
</div>
);
}
export default App;
类组件（class component）和函数式组件（functional component）之间有何不同
1.构造函数创建的组件叫：无状态的组件；
2.class关键字创建的组件叫：有状态的组件；
3.有状态和无状态的本质的区别在于是否有state（状态）属性
state用来设置状态
使用this.state的地方是构造函数 state是组件的核心 基本上状态是确定组件的呈现和行为的对象
setState用来改变状态
setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法
注意：不能再组件内部通过this.state修改状态，因为该状态会在调用setState（）后被替换
replaceState（）方法与setState（）类似，但是方法只会保留nextState状态，原state不在nextState中的状态都会被删除。
使用语法：
replaceState（object nextState[function clallback]） nextState,将设置的状态替换当前的state callback。可选参数，该函数会在replaceState设置成功，且重新渲染组件
React主要优点
它提高了引用的性能可以方便的在客户端和服务器端使用，由于JSX代码的可读性好 React很容易与Metor，Angular等其他框架集成。
什么是JSX
jsx是JavaScript的简写
jsx是javascript高级语法糖，最终执行时还是会转成原生的js，通过bebel等方式
在编写React中如何使用jsx语法？
在需要使用JavaScript代码的时候使用{}包裹 但是这个花括号只能填写一句JavaScript代码 如果你在{}花括号内填写for循环等多行代码时，它就会报错
如何在React组件中绑定事件呢？
<div onClick={this.show}> 显示</div>
React中的refs
refs是React提供给我们安全访问DOM元素或者某个组件实例的句柄，我们可以为元素添加ref属性然后在回调函数中接受该元素在DOM中的句柄，该值会最为回调函数的第一个参数返回，用于对render（）返回的特定元素或组件引用。当需要进行DOM测量或向组件添加方法时，他们就会派上用场。
给需要获取DOM元素节点添加ref属性 <div ref="title">你好 世界</div>
在需要获取DOM元素的回调函数中 this.refs.title 获取到真实的DOM元素节点
React中有三种构建组件方式
1.React.createClass()
2.Es6 class
3.无状态函数组件
defaultchecked
可以返回checked属性的默认值；该属性在checkbox默认被选定时返回true，否则返回false
网友评论