React入门
简介
1.React是什么？
model View control 中 React只关注view，只管页面的呈现
React：
用于构建用户界面的 JavaScript 库
React是一个将数据渲染为HTML视图的开源JavaScript库
2.React是谁开发的？
由Facebook的软件工程师 Jordan Walke
2013的5月开源就开始陈酿了。
3.为什么要学习React？
1.原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
2.使用JavaScript直接操作DOM，游览器胡进行大量的重绘重排。
3.原生JavaScript没有组件化编码方案，代码复用率低。
4.React的特点
1.采用组件化模式，声明式编码，提高开发效率和组件复用率。
2.React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的DIffing算法，尽量减少与真实DOM交互。
虚拟DOM：React用的DOM，放在内存里，不在代码中。
5.学习React之前你要掌握的JavaScript基础知识
判断this的指向 class（类） ES6语法规范 npm包管理器 原型，原型链数组常用方法 模块化
React的基本使用
React是如何操控html中的真实DOM的？
我们拿到一捆数据，使用React操控，来显示到html页面中，该怎么做？
var data = ['一号元素','二号元素','三号元素','四号元素']
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_React</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../JS/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../JS/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
var data = ['一号元素', '二号元素', '三号元素', '四号元素']
// 1.创建虚拟DOM
const VDOM = (
<div>
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
这里面用的就是JSX语法，我们创建了一个虚拟DOM，用JSX的语法写HTML，html不原生支持JSX的，但是React中的babel，能将JSX转换为JavaScript，这样html就能识别了，在使用JSX的时候，一定要检查标签是否带上了babel，是否有引入React提供的babel包。
那么不使用JSX，直接用javascript也是可以的。
比如我要在html中，用h1标签写一个hello
这里大家觉得还好吧？看起来不算麻烦吧
// 1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},'hello')
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
那么如果我要在html中，在h1中再打一个标签span，在span中写hello呢？
// 1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
如果用JSX来写呢？
// 1.创建虚拟DOM
const VDOM = <h1><span>hello</span></h1>
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
要是再复杂一些呢？还使用React.createElement的话，代码会变的不近人情，所以React的学习中，JSX是必要的。
React JSX
什么是jsx?
本质上来讲，JSX 只是为 React.createElement(component, props, …children) 方法提供的语法糖。
模块与组件，模块化与组件化的理解
模块
1.理解：向外提供特定的功能的js程序，一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
3.作用：复用js，简化js的编写，提高运行效率
组件
1.理解：用来实现局部功能效果的代码和资源的集合
2.为什么：一个界面的功能更复杂
3.作用：复用编码，简化项目编码，提高运行效率
模块化
当应用的js都以模块化来编写的，这个应用就是一个模块化的应用
组件化
当应用是一多组件的方式实现，这个应用就是一个组件化的应用
什么是组件化？ 比如我做了一个博客的项目，有一个Header，那么Header整个就是一个组件化，可以拆下来拿到其他地方用
组件实例的三大核心属性
什么是组件实例呢？
组件分为两种组件，一种是函数组件，函数组件没有this，没有实例。
我们说的组件实例就是
属性：
1.state
2.props
3.ref与事件处理
主要内容：
1.state
1.state是组件对象中最重要的属性，值是一个对象(可以包含多个数组)
首先上个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>state状态</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../JS/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../JS/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../JS/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 需求：用条件组件 在html中显示今天天气很炎热(凉爽)
// 1.创建组件
class Weather extends React.Component {
// 构造器要调用几次？
constructor(props) {
super(props)
this.state = { isHot: true, wind: "微风" }
this.changeWeather=this.changeWeather.bind(this)
}
render() {
//读取状态
const { isHot } = this.state
return (
<div>
<h1 onClick={this.changeWeather}>
今天天气很{this.state.isHot ? '炎热' : '凉爽'}
</h1>
</div>
)
}
changeWeather() {
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))
</script>
</body>
</html>
进入网页查看class类实例Weather的state状态：
Weather
============
props
new entry: ""
============
state
isHot:true
wind:"微风"
=============
rendered by
react-dom@16.8.4
看见里面的状态了，state里面的状态我不写进去的时候是空的，这个时候我们再来看需求：
需求：今天的天气好热(凉爽)。通过点击 炎热和凉爽不停的切换。
分析：点击在html中，按钮与点击相匹配，那么点击弹出怎么写？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_原生事件绑定</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2" onclick= demo() >按钮2</button>
<button onclick="demo()">按钮3</button>
<script type="text/javascript">
//第一种方法
const btn1 = document.getElementById('btn1')
btn1.addEventListener(
'click', () => {
alert('按钮1被点击了')
})
//第二种方法
// const btn2 = document.getElementById('btn2')
// btn2.onclick = ()=>{
// alert('按钮2被点击了')
// }
//第三种方法
const btn3 = document.getElementById('btn3')
btn3.demo()
function demo() {
alert('按钮3被点击了')
}
</script>
</body>
</html>
这里解决的就是点击弹出切换的功能。
转载请注明：XAMPP中文组官网 » React入门_React基础知识点全面