react学习笔记
1. Jsx语法
在html中属性的值通过双引号（字符串数据）或者大括号（表达式）
//双引号
const a = 
//大括号
const x = "1.jpg"
const a = <img src={x} />
//有子元素的情况，都只能包含在同一个元素内，与vue语法保持一致
const a = (
<div>
<h1>标题</h1>
<span>gogogo</span>
</div>
)
注意：react对于jsx中的变量都会进行转义，以免xss攻击
2. 渲染DOM
通过reactDOM.render方法来渲染dom节点，并且react元素一旦创建就是不可变的，唯一的办法就是重新创建个新的元素然后重新通过ReacDOM.render去渲染，就是这么cool！😝😝😝。但是每次更新，不是统一将整个元素都更新，都只会修改更新了的元素
function tick(){
const ele = (
<div>
<h1>现在的时间是：{new Date().toLocaleTimeString()}</h1>
</div>
);
ReactDOM.render(
ele,
document.getElementById('root')
)
}
setInterval(tick,1000);
3. 函数组件开发
当用户看到用户自定义的组件的时候，就会将jsx的属性作为单个对象（props）传递给此组件
function Aiv(props){
return <h1>hi,{props.name}</h1>
}
const e = <Aiv name = "haha" />;
ReactDOM.render(
e,
document.getElementById('root')
)
注意：自定义的组件的首字母必须为大写，否则不能识别
4. Props是只读的
react虽然是非常灵活的，但是有一条严格的规范：props是只读的，虽然也可以改变，但是不推荐。😝😝😝
比如：
//合格的形式
function Aiv (x, y){
return x+y;
}
//不合格的形式，传参x被修改了
function Aiv (x, y){
x = x + y;
}
5. 类组件开发
注意事项：
- 创建一个es6语法的
class类，并且继承自React.Component - 里面有一个render()方法，将原先函数组件的中的内容，如第3点函数组件例子的内容放到此方法中
- props用this.props替换
class Aiv extends React.Component{
render(){
return <h1>hi,{this.props.name}</h1>
}
}
PS：相比于函数组件，类组件还多了本地状态和生命周期挂钩。👍👍👍
6. 增加本地状态state
-
将render中的this.props替换为this.state
class Aiv extends React.Component{ render(){ return <h1>hi,{this.state.name}</h1> } } -
在类组件中增加一个constructor方法来初始化this.state
class Aiv extends React.Component{ constructor(props){ super(props); this.state = {name:'hy'}; } render(){ return <h1>hi,{this.state.name}</h1> } }
7. 增加生命周期方法
此系列方法是为了拓展ReacDOM的渲染的不可变性。使用此方法可以动态的去改变dom，让我们拭目以待。
class Aiv extends React.Component{
constructor(props){
super(props);
this.state = {name:'hy'};
this.i = 1;
}
componentDidMount() {
this.timerID = setInterval(()=>this.setName(),1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
setName(){
this.i ++;
this.setState({name:"hy"+this.i})
}
render(){
return <h1>hi,{this.state.name}</h1>
}
}
ReactDOM.render(
<Aiv />,
document.getElementById('root')
); ;
-
componentDidMount方法是在ReacDOM渲染dom节点之后执行 -
componentWillUnmount方法是在该dom节点被删除的时候执行
8. 正确地使用state
1). 不能直接操作state属性
//wrong
this.state.name = "hy1";
//correct
this.setState({
name: "hy1"
})
2). state更新可能是异步的
React为了性能，支持单次更新中可以批量执行多个setState，所以你不能在setState中使用this.state这种方式来操作state属性。因为this.state可能是之前的属性，还没来得及改变。如下面的例子对比：
//假设count = 1
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
})
//最后count = 2
但是，setState方法可以除了接收object对象，还可以接收function参数。传入function完美解决异步问题😎😎😎。使用方法：setState( function( prevState，[props] ）{} )。
this.setState(function(x){
return {
count: x.count+1
}
})
this.setState(function(x){
return {
count: x.count+1
}
})
3). state属性可以只更新单个属性
this.state = {
posts: [],
comments: []
};
this.setState({
posts: ['hy']
})
9. state作为参数传递
直接看例子：
<FormattedDate date={this.state.date} />
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
等价于下面：
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
