前言:
本文皆在以最短的时间带vue开发者对react有个大致的了解。
react jsx
JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言
- 可自动防范注入攻击(渲染前所有的内容默认会进行转义)
- 事件使用驼峰式写法
- style内的css属性使用驼峰式写法
- 自定义组件首字母大写
const element = <h1 tabIndex="0">Hello, world!</h1>;
//const element = <img src={user.avatarUrl}></img>;
//var add = funtion(){}
//const element = <h1 onClick={add}>Hello, world!</h1>;
//var style = {
// fontSize:13
//}
//const element = <h1 style={style}>Hello, world!</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
react安装
create-react-app是facebook react团队打造的脚手架,通过脚手架可以快速构建react项目
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
1.目录结构
react
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
vue
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.vue
main.js
vue.config.js
2.查看入口js
react(index.js)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode> //内部组件开启严格模式
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
vue(main.js)
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.元素
const element = <h1>Hello, world</h1>;
React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。
通过 ReactDOM.render()将dom节点插入到指定的dom中
const element = (
<div>
测试元素插入
</div>
);
ReactDOM.render(element, document.getElementById('root'));
//将指定的div渲染到id为root的dom节点下
由于不可改变,如果需要更新值,或者替换的话,就需要重新插入节点到指定dom节点下。
react
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
接下来对比一下vue、react实现的获取当前时间
vue
js:
data(){
return{
time:0
}
},
setInterval(tick, 1000);
function tick() {
this.time = new Date().toLocaleTimeString();
}
dom:
<div>
{{time}}
</div>
对比:
vue直接修改变量值,会直接更改页面上的值
react需要重新将dom渲染到指定id的dom节点下,不过React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。
4.组件定义及使用
react
1.创建一个文件 Test.js
import React from 'react';
class Test extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
export default Test;
2.引入刚创建的Test
import Test from './Test'
3.使用
ReactDOM.render(
<React.StrictMode>
{/* <App /> */}
<Test/>
</React.StrictMode>,
document.getElementById('root')
);
vue
1.创建一个文件Test.vue
<template>
<h1>Hello World!</h1>
</template>
2.引入Test.vue
import Test from './Test'
3.使用
components:{Test}
<Test/>
5.React State(状态)
在我看来react的state就类似于vue组件中的data,具体会有一些差异,感兴趣的可以详细的研究研究。
react
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
vue
<template>
<div>
<h1>Hello, world!</h1>
<h2>现在是 {{date.toLocaleTimeString()}}.</h2>
</div>
</template>
<script>
export default {
data(){
return{
date: new Date()
}
}
}
</script>
<style>
</style>
6.React Props
与vue的props相同,都是单向数据流,不允许在子组件修改父组件传入的参数
react
<Test name='xiaohuozi'/>
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>{this.props.name}</h2>
</div>
);
}
}
export default Test;
vue
<template>
<div>
<h1>Hello, world!</h1>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
props:{
name:{
type:String,
default:''
}
},
data(){
return{
date: new Date()
}
}
}
</script>
7.react 生命周期
- 生命周期的方法对比vue
状态 | vue | react |
---|---|---|
渲染前 | beforeCreate | componentWillMount |
渲染后 | mounted | componentDidMount |
接收到新的prop后被调用 | componentWillReceiveProps | |
在组件接收到新的props或者state时被调用 | shouldComponentUpdate | |
在组件接收到新的props或者state但还没有render时被调用 | beforeUpdate | componentWillUpdate |
在组件完成更新后立即调用,在初始化时不会被调用 | updated | componentDidUpdate |
在组件从 DOM 中移除之前立刻被调用 | beforeDestroy | componentWillUnmount |
react组件创建步骤
- 接收父组件参数 接收props
- 组件内部初始化,constructor方法,初始化state
- componentWillMount被调用
- 调用rander方法渲染
- 渲染后调用componentDidMount方法
如果想获取更多内容,可以扫描下方二维码,一起学习,一起进步。