安装：
在哪里都可以，是全局安装
$ npm install -g create-react-app
进入到你要创建的文件夹，创建myreact，过程有点慢，可以用淘宝镜像
$ create-react-app myreact
打开项目：
$ npm start
image.png
文件结构：
image.png
与vue不同，react不能自动热加载，需要你刷新浏览器
【React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称，例如，class`变成了 className，而 tabindex则对应着tabIndex】
【React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子
】
组件：
有俩种声明方法：
function Testdiv() {
return <div>测试div</div>
}
class Testdiv extends Component{
render(){
return(
<div>测试div</div>
)
}
}
那这两种声明方法有什么区别呢？
function：
1 function component更易于编写阅读和测试
2 代码量更少，上手容易
3 因为没有状态，可以更好的实现容器和表现的分离，可以只负责表现层的逻辑，不用考虑因为复杂的逻辑去改变状态从而带来的麻烦，有利于代码复用。
4 react团队提倡使用
class：
1 虽然function component 有很多好处，但是有些时候class component 还是不可替代的。
2 当需要实现一些容器组件的时候，需要改变内部状态来实现自组件的改变的时候。
3 当需要用到生命周期钩子函数实现一些功能的时候
4 当我们需要提升性能时，性能是一个很重要的问题，有些时候我们需要减少组件的渲染次数，我们就需要在组件内部用shouldComponentUpdate 方法来去判断，或者继承React.PureComponent 类（自动调用shouldComponentUpdate）来实现state和props的浅比较进行判断组件是否重新渲染。
【注意】方法名首写字母一定要大写
image.png
react生命周期：
比较常用的应该是：
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillMount 在渲染前调用,在客户端也在服务端。
我们来跑一个显示时间的定时器：
class Testdiv extends Component{
constructor(props) {
super(props);
this.state = {date: new Date(),aaa:'1'};
}
componentDidMount(){
var this_ = this;
this.timer = setInterval(function () {
this_.setState({
date:new Date()
})
},1000);
}
tick(){
this.setState({
date:new Date()
})
}
componentWillUnmount() {
clearInterval(this.timer);
}
render(){
return(
<div>{this.state.date.toLocaleTimeString()}</div>
)
}
}
constructor的作用：
image.png
这里的this指的是？
image.png
指的是Testdiv本身
扩展：es6箭头函数
componentDidMount(){
this.timer = setInterval(()=>this.tick(),1000);
console.log(this);
}
为什么箭头函数就可以直接在this函数中接着写this不报错呢？
箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
https://www.jianshu.com/p/c1ee12a328d2
写一个类似toggle的东西
image.png
class ToggleDiv extends Component{
constructor(props) {
super(props);
this.state = {istoggle :true};
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState((prevState)=>({istoggle:!prevState.istoggle}));
}
render(){
return(
<button onClick={this.handleClick}>状态是：{this.state.istoggle?'on':'off'}</button>
)
}
}
这里要注意的是：
1.方法名称需要小驼峰式写法
2.handleClick()方法中使用了箭头函数，prevState作为一个参数表示该类的state状态，叫什么都可以。
箭头函数等同于：
handleClick(){
this.setState(function () {
return {istoggle:!this.state.istoggle}
})
}
3.this.handleClick = this.handleClick.bind(this);这句话一定要加【属性初始化器语法】
否则handleClick方法没有主体，handleClick（）中的this为：undefined
如果这句话让你很烦，也可以用箭头函数这么写，但是建议用属性初始化器语法写，大神就是那么写的：
handleClick = ()=>{
this.setState(function () {
return {istoggle:!this.state.istoggle}
})
}
函数传参：
class ToggleDiv extends Component{
constructor(props) {
super(props);
this.state = {istoggle :true};
this.handleClick = this.handleClick.bind(this);
}
handleClick(name,some,e){ //e要放到最后面
console.log(name);
this.setState((state_)=>({istoggle:!state_.istoggle}));
}
render(){
return(
<button onClick={this.handleClick.bind(this,this.state.istoggle,'ww')}>状态是：{this.state.istoggle?'on':'off'}</button>
)
}
}
关于react开发设计，很有用https://blog.csdn.net/yisuowushinian/article/details/79045058
网友评论