1.React overview
- Is a JS library used to build user interfaces, designed to simplify the development of visual interfaces
- Based on the grammar of JSX, JSX is the core component of React. It uses xml markup to directly declare the interface and HTML, JS mixed.
- React core is components
ReactDOM.render(element,container[,callback])
Parameters:
element: rendering source object (element or component)
container: rendering target object
callback: optional, user-defined callback function
2. Advantages of React:
- Declarative design
- Efficient: React minimizes interaction with DOM by simulating the DOM
- Flexible: React is only the View layer in MVC. It cannot build large-scale applications on its own. It needs to cooperate with existing frameworks and libraries.
- Use JSX syntax
- Component reuse: Components are the core of react. A complete react application is built up of several components, each of which has its own data and methods.
- Data flow of single response
3.React installation
- Introduced through the script tag:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
Analysis:
Three libraries were introduced: react.development.min.js, react-dom.development.min.js and babel.min.js;
react.min.js-React's core library
react-dom.min.js- Provide DOM-related functions
babel.min.js-Babel can convert ES6 code to ES5 code, so that we can execute React code on browsers that currently do not support ES6.
Babel has built-in support for JSX. By using Babel and the babel-sublime package together, the syntax rendering of the source code can be raised to a whole new level.
2. Use React through npm (scaffolding)
create-react-app自动创建的项目是基于webpack+ES6
安装create-react-app: cnpm install -g create-react-app
创建项目： create-react-app my-app
进入项目所在目录： cd my-app
启动项目: npm start
4. React virtual DOM
Actual DOM: When designing the UI of a traditional HTML web page, several DOM elements are defined in the page, which are responsible for carrying appearance performance and data changes. Any appearance changes or data information updates must be fed back to the UI, and the actual DOM is required. carry out. Problem: For complex page UI, a large amount of actual DOM is often defined. Frequent manipulation of a large number of actual DOMs will cause a severe drop in access performance, and Yonghui's body fluid will also become worse.
One of React’s core advantages: Supports the creation of virtual DOM to improve page performance.
Virtual DOM is an abstraction layer based on DOM. Its essence is a JavaScript object. When data and state change, they will be automatically and efficiently synchronized. In the virtual DOM, finally, only the changed part is synchronized to the DOM.
<div id='example'>
<h1>实际DOM</h1> <!--实际DOM-->
</div>
<!--元素渲染-->
<script type='text/babel'>
ReactDOM.render(
<h1>虚拟DOM</h1>, //虚拟DOM
document.getElementById('example')
)
</script>
5. React's rendering mechanism
- The Diff algorithm is one of the information technologies that supports the React rendering mechanism.
- The core of the Diff algorithm is to compare the differences before and after finding the DOM tree.
- The basic principle of the React rendering mechanism: After the state and attributes of the DOM tree are changed, a new virtual DOM tree is constructed, and then compared with the original virtual DOM tree through the Diff algorithm, the change of the node is calculated and the update operation is performed.
- The advantage of this algorithm is to reduce the frequent repetitive operations on the DOM, thereby improving the page access performance
6.JSX syntax
A syntax extension of JavaScript. JSX is implemented inside JavaScript.
advantage:
- JSX executes faster because it is optimized after being compiled into JavaScript code.
- It is type-safe, and errors can be found during the compilation process.
- Using JSX to write templates is easier and faster.
You can { }introduce variables, expressions, attributes...
<!-- JSX -->
<div id="app"></div>
<script type="text/babel">
var reactDiv=document.getElementById('app');
const userinfo = {
name:'占山',
age:12,
}
const arr = [
<p>姓名：阿酱</p>,
<p>班级：七一班</p>
]
const styles={
css1:{
color:'red',
fontSize:'20px'
},
css2:{
color:'blue',
fontSize:'30px'
}
}
function showUser(user){
return '姓名：'+user.name+'，年龄:'+user.age
}
//增加判断条件
function chooseuserinfo(user){
if(user){
return showUser(user)
}else{
return '用户信息为空'
}
}
const ReactP=(
{
/*JSX注释表达式*/}
<span>
<p>JSX {
1==1?'true':'false'}</p> {
/*算数表达式*/}
<p>{
userinfo.name}</p> {
/*对象属性*/}
<p>{
showUser(userinfo)}</p> {
/*函数表达式*/}
{
/*增强函数表达式：若user为空，则返回‘用户信息为空’，代替if条件*/}
<p>{
chooseuserinfo(userinfo) }</p>
<p>{
chooseuserinfo() }</p>
<div>{
arr }</div> {
/*数组表达式*/}
<p style={
styles.css1 }>改变样式1</p> {
/*样式表达式*/}
<p style={
styles.css2 }>改变样式2</p>
</span>
)
ReactDOM.render(ReactP,reactDiv)
</script>
Note: The type attribute when importing script files:<script type="text/babel">