React.js
虚拟DOM（Virtual Document Object Model）
DOM：用JS对象来表示页面上的元素，并提供操作DOM对象的API
虚拟DOM：用JS对象来模拟页面上的DOM和DOM嵌套
实现虚拟DOM的作用：为了实现页面中，DOM元素的高效更新即用JS手动模拟两棵新旧DOM树的页面嵌套关系然后进行对比实现按需更新
Diff算法
- tree diff：新旧两棵DOM树，逐层对比，当整棵树对比完毕，则所有需要更新的元素，必然能被找到
- component diff：在进行Tree Diff 的时候，每一层中，组件级别的对比
如果对比前后，组件类型相同，则暂时认为此组件不需要被更新
如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上 - element diff：在进行组件比较时，如果两个组件类型相同，则需要进行元素的对比
使用
安装
运行cnpm i react react-dom -S
react：专门用于创建组件和虚拟DOM，同时组建的生命周期也在这个包中
react-dom：专门进行DOM操作，最主要的应用场景就是ReactDOM.render()
运用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
import React from 'react'
import ReactDOM from 'react-dom'
//这两个导入的时候必须用这样的接收名称
const myElement = React.createElement('h1',{ id: 'myElement',title: 'this is a element'},'someone')
const myBigElement = React.createElement('div',{ id: 'myBigElement',title: 'this is a big element'},'somebigone', myElement)
ReactDOM.render(myBigElement,document.getElementById('app'))
JSX
使能够在JS文件中直接写html
使用babel来实现
把它转换成React.createElement形式执行
安装
- 安装bael
1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
2. 运行cnpm i babel-preset-env babel-preset-stage-0 -D - 安装babel-preset-react
运行cnpm i babel-preset-react -D
配置webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
module.exports = {
mode:'development',
plugins: [
htmlPlugin
],
module:{//所有第三方模块的配置规则
rules:[
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
]
}
}
建立.bablerc文件（json格式不允许注释和双引号）
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
常用语法
ReactDOM.render(<div>2</div>,document.getElementById('app'))
let num = 123
ReactDOM.render(<div>{num}</div>,document.getElementById('app'))
let num = 123
ReactDOM.render(<div>{num + 321}</div>,document.getElementById('app'))
let num = 123
let str = 'hello'
let boolean = true
ReactDOM.render(<div>
{num + 321}
<hr />
{str}
<hr />
{boolean.toString()}
</div>,document.getElementById('app'))
let num = 123
let str = 'hello'
let boolean = true
let title = '666'
const Array = [
<h2></h2>,
<h3></h3>
]
const h1 = <h1></h1>
ReactDOM.render(<div>
{num + 321}
<hr />
{str}
<hr />
{boolean ? 'yes' : 'no'}
<hr />
<p title={title}>someson</p>
{h1}
<hr />
{Array}
</div>,document.getElementById('app'))
注意：写JS表达式时要写到{}里
import React from 'react'
import ReactDOM from 'react-dom'
//这两个导入的时候必须用这样的接收名称
let arrStr = ['jack','lisa','anni']
const nameArr = []
arrStr.forEach(item =>{
const temp = <h5>{item}</h5>
nameArr.push(temp)
})
ReactDOM.render(<div>
{nameArr}
{arrStr.map(item => {//map()方法能够返回一个处理后数组但是必须要有return
return <h2>{item}</h2>
})}
</div>,document.getElementById('app'))
注释
推荐使用{/*注释内容*/}
在JSX中的元素添加class类名（因为与JS的代码发生歧义）
需要使用classname代替class
ReactDOM.render(<div className="mystyle"></div>,document.getElementById('app'))
htmlFor代替label的for属性
ReactDOM.render(<label htmlFor="myfor"></label>,document.getElementById('app'))
根元素包裹
在创建DOM的时候，所有的节点，必须有唯一的根元素包裹
扫一扫
2958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
