相比较于VUE, 个人在开发过程中更加倾向于REACT,
不是因为REACT更好用,相反是更难用,就是大家所说的学习曲线陡,
但是REACT个人觉得正是因为他难用,或者说,代码风格更加趋近于原生JS,尤其是ES6的面向对象的编程思想,可以一边开发,一边提升自己的原生js熟练程度,不至于过度产生框架依赖。
下面以一个点赞事件为例
采用纯js开发思想,由于没有JSX编译 , 所以 暂时使用 模版字符串 做替代。
1. 理解数据驱动思想
<body>
<div id="root"></div>
<!--root将会被作为根节点,在里面渲染一个按钮,实现点赞事件-->
<script>
var root = document.getElementById('root');
//1. 设置初始化状态
var state = {
like : false,
color:'black'
}
//2. 通过setState触发修改数据触发渲染事件
function setState (newState){
state = {
...state,
...newState
}
console.log(state)
render();
}
// 加载页面进行初始化渲染
render();
// 事件 调用该事件 触发 setState 进行渲染
function handleClick(){
setState({
like : !state.like,
color: state.like? 'black' :'red'
})
}
// 渲染页面函数
function render(){
root.innerHTML =
`
<button style="color:${state.color}" onclick="handleClick()">${state.like? '已赞':'点赞'}</button>
`
}
</script>
</body>
复制代码
0. 初始化渲染,绑定事件
1. 触发事件函数,该函数进行触发setState
2. setState被触发,修改状态(修改state中的数据),修改后触发渲染函数
3. 渲染该组件
2.理解react的面向对象的组件式开发思想
<body>
<div id="root"></div>
<!--在这个节点上面渲染-->
<script>
var root = document.getElementById('root')
// 这个是父类
class Component {
setState(newState) {
this.state = {
...this.state,
...newState
}
return this;
}
}
// 这个是子类 按钮 继承父类的setState功能
class Button extends Component {
constructor() {
super()
this.state = {
like: false
}
this.render()
}
render() {
const state = this.state;
const node = `<button style="color:${state.like ? 'red' : 'black'}" onclick="this.handleClick()">${state.like ? '已赞' : '点赞'}</button>`;
return node;
}
}
// 这个是子类 标题 继承父类的setState功能
class Title extends Component {
constructor() {
super()
this.state = {
text: '这是一个标题'
}
}
render() {
return `<h1>${this.state.text}</h1>`
}
}
//这个作为包装容器,
class Wrap {
constructor() {
}
render() {
return `
// 构造渲染子类
${new Title().render()}
// 可以调用修改自己的状态, 每一个模块都相互独立,互不影响。
${new Button().setState({ like: true }).render()}
${new Title().render()}
${new Button().render()}
`
}
}
//将wrap渲染到 html中
root.innerHTML = new Wrap().render();
</script>
</body>
复制代码