1. 概述
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
1.1 React 特点
- 1.声明式设计 −React采用声明范式，可以轻松描述应用。
- 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
1.2 安装
- 使用 create-react-app 快速构建 React 开发环境
（create-react-app 自动创建的项目是基于 Webpack + ES6 ）
执行以下命令创建项目：
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
2. 创建虚拟DOM的两种方式
2.1 JSX创建虚拟DOM
<body>
<div id="text"></div>
<script type="text/babel">
const VDOM = <h1> Hello React</h1>
ReactDom.render(VDOM,document.getElementById('test'))
</script>
</body>
2.2 JS创建虚拟DOM
<body>
<div id="text"></div>
<script type="text/babel">
const VDOM = React.createElement('h1',{id:'title'},'Hello React')
ReactDom.render(VDOM,document.getElementById('test'))
</script>
</body>
2.3 JSX好处
- 更容易编写React组件，因为可以使用HTML标签来描述组件的结构和样式。
- 可以添加注释，使代码更易于理解和维护。
- 可以在JavaScript代码中直接操作DOM元素，而不需要通过浏览器渲染页面。
JSX会被翻译成JS，只是JS的语法糖
2.4 虚拟DOM与真实DOM
虚拟DOM
- 本质是Object类型的一般对象
- 虚拟DOM比较轻，真实DOM比较重
- 虚拟DOM最终会被React转化为真实DOM，呈现在页面上
3. JSX语法规则
- 定义虚拟DOM时，不要写引号
const VDOM = <h1> Hello React</h1>
const VDOM = "<h1> Hello React</h1>" //加引号变成字符串
- 标签中混入JS表达式 [会产生一个存在或不存在的值] 时要用
{ }
const myId = 'TITle'
const myData = 'Hello React'
const VDOM = (
<h1 id={myId.toLowerCase()}>
<span>{myData}</span>
</h1>
)
- 样式的类名指定不能用class，用className
const VDOM = (
<h1 className="title">
<span>hello</span>
</h1>
)
- 内联样式要用style={{ key: value }}的形式去写
const VDOM = (
<h1 style = {{color:'white',fontSize:'29px'}}>
<span>hello</span>
</h1>
)
- 只能有一个根标签
const VDOM =(
<div>
<div></div>
<div></div>
</div>
)
//多个根标签报错
const VDOM =(
<div></div>
<div></div>
)
- 所有标签必须闭合
const VDOM = (
<input type="text"></input>
)
const VDOM = (
<input type="text" />
)
- 标签首字母
- 若小写字母开头，则将标签转为html中同名元素，html中无对应元素报错
- 若大写字母开头，react就把该标签渲染为组件，组件未定义则报错
//会被识别为组件
const VDOM = (
<Hello></Hello>
)
//会被识别为html标签,找不到对应标签报错
const VDOM = (
<good></good>
)
eg
const data = [1,2,3,4]
const VDOM = {
<div>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
}
4. 组件与模块
4.1 函数式组件
- 适用于简单组件的定义
<div id="test"></div>
<script type = 'text/babel'>
<!-- 创建函数式组件 -->
function MyComponent(){
return <h2>我是用函数定义的组件</h2>
}
//渲染组件到页面，注意首字母大写，小写会被当做html标签
ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>
4.2 类式组件
类
- 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
- 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
- 类中所定义的方法，都是放在了类的原型对象上。供实例去使用
<script type = 'text/javascript'>
//创建一个Person类
class Person {
//构造器方法
constructor(name, age) {
console.log(this);//构造器中的this是，类的实例对象（new是谁就是谁）
this.name = name
this.age = age
}
//一般方法
speak() {
//spack方法放在了哪里？--类的原型对象上，供实例使用
console.log(this);
//通过Person实例调用speak时，speak中的this就是Person实例
console.log(`我叫${this.name},我的年龄是${this.age}`)
}
}
// 创建一个Person的实例对象
const p1 = new Person('tom', 18)
const p2 = new Person('jack', 19)
p1.speak()
p2.speak()
</script>
继承
class Student extends Person {
constructor(name, age, grade) {
super(name, age)
this.grade = grade
}
//重写从父类继承过来的方法
speak() {
console.log(`我叫${this.name},我的年龄是${this.age}，我的班级是${this.grade}`)
}
//一般方法
study() {
//study方法放在了哪里？类的原型对象上，供实例使用
console.log("我爱学习")
}
}
const s1 = new Student('tina', 20,'5年级')
console.log(s1);
s1.speak()
类式组件(简单)
- 必须继承
React.Component - 必须有render，且render必须有返回值
<script type = 'text/javascript'>
//1.创建类式组件
class MyComponent extends React.Component{
//render放在哪？--MyComponent的原型对象上，供实例使用
//render中的this是谁？--MyComponent的实例对象
render(){
return <h2>我是类定义的组件</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById("test")
// 执行了ReactDOM.render(<MyComponent/>,document.getElementById("test")后
// 1.React解析组件标签，找到了Mycomponent组件
// 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
// 3.将render返回的虚拟DOM转为真实DOM，随后呈现到页面中
</script>
5. state
- state最好写成对象
<script type = 'text/javascript'>
//1.创建类式组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state = {isHot:true}
}
render(){
//读取state
const {isHot} = this.state
return <h2>今天的天气很{isHot?'炎热:凉爽'}</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById("test")
</script>
6. 事件绑定
原生事件绑定
<button id="btn1"> 按钮1 </button>
<button id="btn2"> 按钮2 </button>
<button onclick = "click()"> 按钮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被点击')
}
function demo(){
alert('按钮3被点击')
}
</script>
react事件绑定
- 把原生的
onclick换成onClick - 方法外不能加引号
- 方法不能加括号
<script type = 'text/javascript'>
//1.创建类式组件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state = {isHot:true}
}
render(){
//读取state
const {isHot} = this.state
return <h2 onClick={demo}>今天的天气很{isHot?'炎热:凉爽'}</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById("test")
function demo(){
console.log('标题被点击')
}
</script>
1
<script type = 'text/javascript'>
//1.创建类式组件
class Weather extends React.Component{
constructor(props){
super(props)
this.state = {isHot:true}
}
render(){
//读取state
const {isHot} = this.state
return <h2 onClick={changeWeather}>今天的天气很{isHot?'炎热:凉爽'}</h2>
}
changeWeather(){
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById("test")
</script>
网友评论