介绍：
React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，在13年f进行开源
17版本官网：React -- A JavaScript library for building user interfaces
18版本官网：React 官方中文文档
特点：
- 声明式编码
- 组件化编码
- React Native 编写原生应用
- 高效（优秀的Diffing算法）
一、基础
主要核心，依赖下面四个文件
html<!-- 引入核心库。全局出现React对象--> <script type="text/javascript" src="./React-js/16.8/react.development.js"></script> <!-- 用于支持react操作DOM。全局出现ReactDOM对象--> <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script> <!-- 用于将jsx转换为js --> <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script> <!-- 用于对组件标签属性进行限制。全局出现PropTypes对象 --> <script src="./React-js/16.8/prop-types.js"></script>
1、基本使用
1.1、虚拟dom
关于虚拟DOM:
- 本质是object类型的对象(一般对象)
- 虚拟DOM比较"轻"，真实DOM比较"重"，因为虚拟DOM是React内部在用，无需真实DOM 上:那么多的属性。
- 虚拟DOM最终会被React转化为真实DOM。呈现在页面上
html
<body>
<div id="test"></div>
<!-- 引入核心库 -->
<script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
<!-- 用于支持react操作DOM -->
<script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
<!-- 用于将jsx转换为js -->
<script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>
<!-- 一定是babel -->
<script type="text/babel">
// 创建虚拟dom
const VDOM = <h1>Hello.React</h1>
const VDOM2 = <h1>----------------</h1>
// 渲染虚拟DOM到页面（后面的会替换之前）
ReactDOM.render(VDOM,document.getElementById('test'))
ReactDOM.render(VDOM2,document.getElementById('test'))
</script>
</body>2.2、JSX写法
1、全称: JavaScript XML。
2、react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3、作用: 用来简化创建虚拟DOM
写法：var ele = <h1> Hello JSX! </h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象
4、jsx语法规则:
- 定义虚拟DOM时，不要写引号。
- 标签中混入JS表达式时要用{}-
- 样式的类名指定不要用class，要用className.
- 内联样式,要用style={{key : value}}的形式去写。
- 只有一个根标签
- 标签必须闭合
- 标签首字母
(1).若小写字母开头，则将改标签转为htm1中同名元素，若htm1中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
html
<body>
<div id="test"></div>
<!-- 引入核心库 -->
<script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
<!-- 用于支持react操作DOM -->
<script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
<!-- 用于将jsx转换为js -->
<script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>
<!-- js写法 -->
<script type="text/javascript">
// 创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'js写法'))
// 渲染虚拟DOM到页面（后面的会替换之前）
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
<!-- jsx写法 -->
<script type="text/babel">
const data = ['抽烟','喝酒','烫头']
const obj = {name1:'抽烟',name2:'喝酒',name3:'烫头'}
const myId = 'song'
const myData = 'HELLO'
const VDOM = (
<div>
<h1 className="box" id={myId}>
<span style={{ color: 'red', fontSize: '40px' }}>{myData.toLocaleLowerCase()}</span>
</h1>
<input type="text" />
<ul>
{
// data // 直接使用数组，会自动遍历
// obj // 对象，会报错
data.map((item,i)=><li key={i}>{item}</li>)
}
</ul>
</div>
)
// 渲染虚拟DOM到页面（后面的会替换之前）
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>2、函数式组件
html
<script type="text/babel">
// 定义函数组件
function Demo() {
console.log(this); // 经过babel转化开启严格模式，this没有明确的调用，所以为undefined
return <h2>函数定义的组件</h2>
}
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
/*
执行了ReactDOM.render( <MyComponent/>.......之后，发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOW转为真实DOM，随后呈现在页面中。
*/
</script>3、类组件
html
<script type="text/babel">
// 定义类组件
class Demo extends React.Component{
render(){
// render：类的原型对象上(可在浏览器控制台输入Demo回车测试)，供实例使用
// this指向Demo的实例对象。俗称：组件对象或组件实例对象
console.log('render中this',this);
return (
<h2>类定义的组件</h2>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
/*
执行了ReactDOM.render( <MyComponent/>.......之后，发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法
3.将返回的虚拟DOW转为真实DOM，随后呈现在页面中。
*/
</script>4、组件的三大核心
4.1、state：存放状态
html
<script type="text/babel">
// 定义类组件
class Weather extends React.Component {
constructor(props) { // 构造器只调用一次
super(props)
// 初始化状态
this.state = {
isHot: false,
wind: '大风'
}
// 改变原型上的demo的this指向，并把原型上的demo赋值到实例上的demo上。处理下面this为undefind
this.demo = this.demo.bind(this)
}
render() { // 调用1+n次。1:初始化 n:状态更新的次数
return (
<h2 onClick={this.demo}>今天天气{this.state.isHot ? '炎热' : '很冷'}</h2>
)
}
demo() {
// demo放在哪里? Weather的原型对象上，供实例使用
//由于demo是作为onclick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以demo中的this为undefined
console.log('this', this); // undefind
// 不能直接修改值。数据虽然变化，但页面不刷新
// this.state.isHot = !this.state.isHot
// 注意：需要通过setState方法来修改状态
this.setState({ isHot: !this.state.isHot })
}
}
// 渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))
function demo() {
// console.log('被点击');
alert('被点击')
}
</script>(1)、state简写
html
<script type="text/babel">
// 定义类组件
class Weather extends React.Component {
// 初始化状态
state = { isHot: false, wind: '大风' }
render() {
return (
<h2 onClick={this.demo}>今天天气{this.state.isHot ? '炎热' : '很冷'}</h2>
)
}
// 自定义方法---需要赋值语句的形式+箭头函数
demo = ()=> {
console.log('this', this); // undefind
this.setState({ isHot: !this.state.isHot })
}
}
// 渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))
</script>
<!--
1、组件中 render方法中的this 为组件实例对象-
2、组件自定义的方法中this为 undefined，如何解决?
a.强制绑定this:通过函数对象bind
b.箭头函数
3、状态数据，不能直接修改或更新
-->4.2、props：接收参数
html
<script type="text/babel">
// 定义类组件
class Weather extends React.Component {
render() {
console.log(this);
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>性别：{this.props.sex}</li>
<li>年龄：{this.props.age}---{this.props.flag}</li>
</ul>
)
}
}
const p = { name: 'tom', age: 18, sex: '女' }
// 渲染组件到页面
ReactDOM.render(<Weather {...p} flag={666}/>, document.getElementById('test'))
</script>