我们首先考虑一个小需求：页面上一个数字，两个按钮，分别是「+」和「-」按钮，点击后数字分别+1和-1。
先以「传统JS」的角度考虑，我们会怎么做？
// html代码
<div id="root">
<span id="number">0</span>
<button id="add">+</button>
<button id="minus">-</button>
</div>
// 获取显示「数字」的节点
let number = document.querySelector('#number');
// 获取「add」按钮节点
let add = document.querySelector('#add');
// 获取「minus」按钮节点
let minus = document.querySelector('#minus');
add.addEventListener('click', function() {
number.innerText = parseInt(number.innerText, 10) + 1;
});
minus.addEventListener('click', function() {
number.innerText = parseInt(number.innerText, 10) - 1;
});
我们用一张图来分下下这个「逻辑」：
image.png
如图，我们是从「页面」中先获取元素0，然后在JS里面进行「操作」，最后在返回到页面中。
React在这里的思想就是能不能减少这种复杂的流程，从JS返回到页面（（2）处）是不能省略的，所以就试试把（1）处的流程优化一下。
image.png
如图，我们直接在「JS」部分产生和操作「节点」，然后传到「页面」上显示。
此时要引入两个库，「react」和「react-dom」,然后重写下上面的代码。
let number = 0;
let add = () => {
number += 1;
render();
}
let minus = () => {
number -= 1;
render();
}
render();
function render() {
let span = React.createElement('span', {}, number);
let button1 = React.createElement('button', {onClick: add}, '+');
let button2 = React.createElement('button', {onClick: minus}, '-');
let div = React.createElement('div', { className: 'parent'}, span, button1, button2);
ReactDOM.render(div, document.querySelector('#root'));
}
如上述代码，render中有很多「React.createElement」，我们用「h」来表示「React.createElement」。
function render() {
let h = React.createElement;
let span = h('span', {}, number);
let button1 = h('button', {onClick: add}, '+');
let button2 = h('button', {onClick: minus}, '-');
let div = React.createElement('div', { className: 'parent'}, span, button1, button2);
ReactDOM.render(div, document.querySelector('#root'));
}
然后我们又想可以不可以把「div」，「span」，「button1」，「button2」直接放到「React.render」里面？于是乎。
function render() {
let div = React.createElement('div', { className: 'parent'},
React.createElement('span', {}, number),
React.createElement('button', {onClick: add}, '+'),
React.createElement('button', {onClick: minus}, '-')
);
ReactDOM.render(div, document.querySelector('#root'));
}
上面的「div」里面的代码，看起来是不是很熟悉的「层级感」？是不是跟HTML里面的「标签」很像？如果能写成「标签」的样子，但是最后可以转义为正确的语法就好了，于是有了「 JSX」语法。
function render() {
ReactDOM.render(
<div className="parent">
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>
, document.querySelector('#root'));
}
是不是感觉熟悉了很多？
这个时候又有一个问题，如果页面中需要很多「元素」，那不是要搞成一堆？比如下面这样
function render() {
ReactDOM.render(
<div className="parent">
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
<span>{number}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>
, document.querySelector('#root'));
}
有什么方法可以把这些代码「包装」一下？我们想到了「函数」。（做两个「计数器」）
let number = 0;
let add = () => {
number += 1;
render();
}
let minus = () => {
number -= 1;
render();
}
let add2 = () => {
number += 2;
render();
}
let minus2 = () => {
number -= 2;
render();
}
function Box1(obj) {
return(
<div>
<span>{number}</span>
<span>{obj.name}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>
);
}
function Box2(obj) {
return(
<div>
<span>{number}</span>
<span>{obj.name}</span>
<button onClick={add2}>+</button>
<button onClick={minus2}>-</button>
</div>
);
}
function App() {
return(
<div className="parent">
<Box1 name='Jason'/>
<Box2 name='Jack'/>
</div>
);
}
render();
function render() {
ReactDOM.render(
<App/> // 等价于 React.createElement(App)
, document.querySelector('#root'));
}
函数是可以传「参数」的，我们在「Box1」和「Box2」函数组件上增加一个name「属性」，然后在
修改成如上代码后，我们在「页面」中点击「+」号，出现一个bug，就是两个「计数器」都会变化.
image.png
这是为什么呢？原来是因为两个计数器共用了一个「number」变量，然后我们把两者翻开。
let number = 0;
let add = () => {
number += 1;
render();
}
let minus = () => {
number -= 1;
render();
}
let number2 = 0;
let add2 = () => {
number2 += 2;
render();
}
let minus2 = () => {
number2 -= 2;
render();
}
function Box1(obj) {
return(
<div>
<span>{number}</span>
<span>{obj.name}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>
);
}
function Box2(obj) {
return(
<div>
<span>{number2}</span>
<span>{obj.name}</span>
<button onClick={add2}>+</button>
<button onClick={minus2}>-</button>
</div>
);
}
function App() {
return(
<div className="parent">
<Box1 name='Jason'/>
<Box2 name='Jack'/>
</div>
);
}
render();
function render() {
ReactDOM.render(
<App/> // 等价于 React.createElement(App)
, document.querySelector('#root'));
}
设置了两个「number」，两个「add」，两个「minus」。但是如果有10个，那我们是不是又要分别申请十个？甚是麻烦。
然后我们又想，能不能把那些变量放到所需要的自己的「作用域」中，我们试试把「number」，「add」，「minus」放到「Box1」中。
function Box1(obj) {
let number = 0;
let add = () => {
number += 1;
render();
}
let minus = () => {
number -= 1;
render();
}
return(
<div>
<span>{number}</span>
<span>{obj.name}</span>
<button onClick={add}>+</button>
<button onClick={minus}>-</button>
</div>
);
}
此时点击「+」号，发现「计数器」没有变化，为啥呢？其实是「add」函数中的「render()」惹的祸。 当执行「add」函数时，虽然我们「number += 1」使得「number」变化，但是后一句立即执行了「render()」，每一次render都会「初始化」Box1，就又使得「number」为0.所以造成「没有反应」的效果。所以我们能不能只是render局部呢？我们想到了「class类」。
class Box1 extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 0
}
}
addOne() {
this.setState({
number: this.state.number + 1
});
}
minusOne() {
this.setState({
number: this.state.number - 1
});
}
render() {
return (
<div>
<span>{this.state.number}</span>
<span>{this.props.name}</span>
<button onClick={this.addOne.bind(this)}>+</button>
<button onClick={this.minusOne.bind(this)}>-</button>
</div>
);
}
}
class Box2 extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 0
}
}
addTwo() {
this.setState({
number: this.state.number + 1
});
}
minusTwo() {
this.setState({
number: this.state.number - 1
});
}
render() {
return (
<div>
<span>{this.state.number}</span>
<span>{this.props.name}</span>
<button onClick={this.addTwo.bind(this)}>+</button>
<button onClick={this.minusTwo.bind(this)}>-</button>
</div>
);
}
}
function App() {
return(
<div className="parent">
<Box1 name='Jason'/>
<Box2 name='Jack'/>
</div>
);
}
render();
function render() {
ReactDOM.render(
<App/> // 等价于 React.createElement(App)
, document.querySelector('#root'));
}
这里有一个细节，就是「onClick」调用函数的时候，add函数里面的「this」指向被改变了，变成了「undefined」。
onClick.call(undefined, ........);
// onClick强行把「this」改变，所以在调用的时候，我们可以
//用「bind」绑定「this」，或者使用「箭头函数」
onClick={ this.addOne.bind(this) };
// 或者
onClick = { () => this.addOne() }
网友评论