Question

单页面应用的实现方式

单页面应用是用锚点实现的，还是用各种div实现的？？？

Answer 1

React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，以下是一个例子：
// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'

// 主组件
class MyDemo extends React.Component {
render() {
return (
<div className="box">
<MyComponent />
</div>
)
}
}

render((
<MyDemo />
), document.getElementById('app'))

// component.js

// 子组件
import React from 'react'

export default class MyComponent extends React.Component {
render() {
return (
<div>
<p>这是一个组件！</p>
</div>
)
}
}

// main.css
.box {
width: 100%
}

相比Vue.js框架，我个人认为React的组件编写方式还是没有Vue来的舒服，组件的css样式还是脱离在组件外部的，维护起来也不是很方便。
从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架，React的虚拟DOM不仅可以提升页面的性能，同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍
至于JSX语法则是JS的一种语法糖，我们可以通过这种语法糖来便捷实现一些功能，这里JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。