React 起源于Facebook的内部项目。2013年开源供给大家使用。是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
React的声明式特点减少了操作DOM的性能损耗,同时组件化开发使得大量的组件得以复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。
虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化。
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
使用CDN方式引入的时候,script片段代码需要申明type为text/babel
直接写在 JavaScript 语言之中的HTML 语言就是JSX。JSX,是一种 JavaScript 的语法扩展,它允许 HTML 与 JavaScript 的混写。JSX是facebook为React框架开发的一套语法糖
const dom = <h1>Hello, world!</h1>;
你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。
const name = 'Tina';
const element = (
<div>
Hello, {name}!
</div>
);
react提供了一个createElement方法创建虚拟DOM,方法接收3个参数,第一个参数是标签名,第二是标签属性,第三个是标签内容。
const dom = React.createElement('h1','','hello,word!')
使用脚手架创建项目
npx是webpack的运行工具
npx create-react-app my-app
cd my-app
npm start
添加路由库 react-router-dom
npm i react-router-dom
一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)把这些局部功能组装到一起,就形成了组件。在react里,组件的最小颗粒度是一个标签元素
用函数定义组件
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
使用Class定义组件
class HelloMessage extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
React 把组件看成是一个状态机。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
在React中,我们可以在组件(Class定义的组件)里添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'World'};
}
render() {
return <h1>Hello {this.state.name}!</h1>;
}
}
更改组件的name属性,即可更改页面渲染结果
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'World'};
}
nameChange(){
this.setState({
name:'Tina'
})
}
render() {
return <div>
<h1>Hello {this.state.name}!</h1>
<button onClick={()=>{this.nameChange()}}>变身</button>
</div>;
}
}