@1)每个文件都会有这么一句话 import React from 'react'
image.png
这是因为react使用的是jsx来代替的常规的javascript，其实不难发现我们编写的是js文件，在js文件中写入类，方法我们都可以理解，但是在return的括号里面的元素标签或者说是组件是不是会让你一头雾水呢，这就是jsx（总的来说jsx其实是react的语法糖）也就是我图上框住的部分，那段jsx的代码是可以写成黄色框里的内容的，但是我们的页面那么多组件，我们都这样写很快就会疯掉的，页面的代码会非常不清晰，所以jsx正是为了方便我们不用写这个样子的代码，然而jsx的代码是需要被翻译成黄色框中的代码的，而这也是用到React的地方啦@2）关于合成事件 event，不知道你有没有这样的困惑，如下代码（e这个事件是哪里来的呢？）
function ActionLink() {
// 注：这里的e是哪里来的呢？
function handleClick(e) {
e.preventDefault();
console.log('链接被点击');
}
return (
<a href="#" onClick={handleClick}> //这里我并没有传入e这个参数
点我
</a>
);
}
其实是这样子的，当你从了解react开始就会听说虚拟dom这个东西了吧，这里你没有听说过也没有关系（这里一时半会也解释不清，后面文章我会单独去解释这个东西，你先知道有这么个东西），就是这个虚拟dom实现了一个合成事件层，我们所定义的事件处理器会接收到这个合成事件处理对象的实例event且我们不用关心跨平台的问题，再说白一点，就是我们定义一个函数，只要我们把它交给类似onClick,onChange这样的事件处理程序，那么这个函数就会获得event
image.png
总的来说就是react为提升性能的@4）组件的生命周期，初学react的你是不是被componentWillMount/componentDidMount函数执行一次，componentWillUpdate等函数在更新之前调用弄晕了呢，其实单单看函数的英译，我们大概也猜出来意思，但是为什么在组建的生命周期中只执行一次呢？这是因为react为组件划分了这么几个阶段如下图
image.png
也就是说每个函数执行是对应上面的三个阶段的（挂载→更新→卸载）这里组件更新阶段shouldComponentUpdate()函数是可以阻止render()渲染的，就是当你state改变我们将这个函数的返回值设为false，你会发现页面并没有任何改变
@5）ref(reference)是react支持的一种非常特殊的属性，你可以用来绑定到render()输出的任何组件上，也就是你可以在任何时间能准确的拿到绑定组件的实例,举个例子
//首先这里的input这个参数是自动接收的，它可以是任何的名字，它代表<input></input>这个标签
//而this.input = input 也就是给当前类实例TodoList中的this增加一个属性input
//使其this.input属性指向<input></input>实例
class TodoList extends Component{
render(){
return(
<input ref={input => this.input = input}></input>
)
}
changeValue = () =>{
this.input.value = "hello world"
}
}
@6）react中还有很多慢慢探索的细节，这里的总结是自己当初学习迷惑的地方
react性能优化部分(这里初学的时候可能不理解，但是后面代码练习中你就会了解到啦)
1.this绑定，你可以使用es6 语法中的箭头函数或者在构造函数绑定this,而不是这样绑定（onClick = {this.changValue.bind(this)}）
2.setState设计成异步，这里在上面已经讲过啦，如果你还是不很理解的话也不要急
3.shouldCompentUpdate 这个函数可以阻止render函数的执行，页面渲染也是相当耗费性能的，这里在上面也已经讲过啦
4.虚拟dom，这个后面再写吧，先知道这个概念吧
网友评论