react梳理
一、创建一个react包
-
安装脚手架
npm i create-react-app -g -
创建一个react项目
create-react-app XXXX (项目名称) -
cd进入项目进行释放(可以不进行)
npm run eject
原理
基于虚拟DOM
1.通过js
- 创建虚拟dom
- 虚拟dom转换真实dom，并挂载到页面
2.react
- 创建虚拟dom react.createElement
| 遇到<> | 遇到{} |
|---|---|
| 解析成虚拟dom | 解析成js |
- 虚拟dom转换真实dom并挂载到页面 reactDom.render()
react组件
1.创建
函数式
- 无this指向
- props是函数参数
- 没有state
- 没有生命周期
- 有返回值
代码格式
import React from 'react
function App(){
return <div>
我是函数式组件
</div>
}
export default App
类声明式组件
- this指向组件实例
- props通过this访问
- 有state
- 有生命周期
- 有返回值
代码格式
import React,{Component} from 'react
class 组件名 extends Component{
render (){
return <div>
我是类组件
</div>
}
}
export default 组件名
生命周期
- 挂载卸载过程
1.1 constructor()
1.2 componentWillMount()
1.3 componentDidMount()
1.4 componentWillUnmount ()
- 更新过程
2.1 componentWillReceiveProps (nextProps)
2.2 shouldComponentUpdate(nextProps,nextState)
2.3 componentWillUpdate (nextProps,nextState)
2.4 componentDidUpdate(prevProps,prevState)
2.5 render()
- React新增的生命周期(个人补充)
3.1 getDerivedStateFromProps(nextProps, prevState)
3.2 getSnapshotBeforeUpdate(prevProps, prevState)
组件通信
- 父组件向子组件传值
父组件Comment.js:
import React from "react"
import ComentList from "./ComentList"
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
},]
}
}
render() {
return (
<div>
<ComentList arr={this.state.arr}> //这里把state里面的arr传递到子组件
</ComentList>
</div>
)
}
}
export default Comment;
子组件ComentList.js:
import React from "react"
class ComentList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="list">
<ul>
{
this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
return (
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export default ComentList;
- 子组件向父组件传值
父组件Comment.js:
import React from "react"
import ComentList from "./ComentList"
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
parentText: "this is parent text",
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
},]
}
}
fn(data) {
this.setState({
parentText: data //把父组件中的parentText替换为子组件传递的值
},() =>{
console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
});
}
render() {
return (
<div>
//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，
不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变
<ComentList arr={this.state.arr} pfn={this.fn.bind(this)}>
</ComentList>
<p>
text is {this.state.parentText}
</p>
</div>
)
}
}
export default Comment;
子组件ComentList.js
import React from "react"
class ComentList extends React.Component {
constructor(props) {
super(props);
this.state = ({
childText: "this is child text"
})
}
clickFun(text) {
this.props.pfn(text)//这个地方把值传递给了props的事件当中
}
render() {
return (
<div className="list">
<ul>
{
this.props.arr.map(item => {
return (
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
//通过事件进行传值，如果想得到event，可以在参数最后加一个event，
这个地方还是要强调，this，this，this
<button onClick={this.clickFun.bind(this, this.state.childText)}>
click me
</button>
</div>
)
}
}
export default ComentList;
- 方便兄弟组件中传值，我知道的实现方式有两种，一种是使用redux，一种是 如图所示的传球：
- 跨级传值 (createContext )
高阶组件
接收一个组件为参数,返回一个新的组件,可以用来做登陆拦截
import React,{Component} from 'react'
function Stop(Com) {
return class LoginStop extends
Component{
componentDidMount(){
!localStorage.username&&this.props.
history.push(/home')
render(){
return <div className = 'stop'>
<Com {..this.props}/>
</div>
}
}
}
export default Stop