内容简介：相比较于VUE, 个人在开发过程中更加倾向于REACT，不是因为REACT更好用，相反是更难用，就是大家所说的学习曲线陡，但是REACT个人觉得正是因为他难用，或者说，代码风格更加趋近于原生JS,尤其是ES6的面向对象的编程思想，可以一边开发，一边提升自己的原生js熟练程度，不至于过度产生框架依赖。
相比较于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>
复制代码
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 理解数学思想：动态规划(Dynamic Programming)
- 透彻理解深度学习背后的各种思想和思维
- 深入理解 Java 函数式编程，第 1 部分: 函数式编程思想概论
- 彻底理解OkHttp - OkHttp 源码解析及OkHttp的设计思想
- IoC-spring 的灵魂(带你轻松理解IOC思想及bean对象的生成过程)
- 从 0 到 1 理解 React redux 的设计思想 （5步分解， 保证小白都能看得懂）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
