内容简介：相比较于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步分解， 保证小白都能看得懂）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
PHP and MySQL Web Development
Luke Welling、Laura Thomson / Sams / July 25, 2007 / $49.99
Book Description PHP and MySQL Web Development teaches you to develop dynamic, secure, commerical Web sites. Using the same accessible, popular teaching style of the three previous editions, this b......一起来看看 《PHP and MySQL Web Development》 这本书的介绍吧!
