React简单知识点梳理(超级详细,超级全)

react梳理

一、创建一个react包

1. 安装脚手架

   npm i create-react-app -g
   

2. 创建一个react项目

   create-react-app XXXX (项目名称)
   

3. cd进入项目进行释放(可以不进行)

   npm run eject
   

原理

基于虚拟DOM

1.通过js

1. 创建虚拟dom
2. 虚拟dom转换真实dom，并挂载到页面

2.react

1. 创建虚拟dom react.createElement

遇到<>	遇到{}
解析成虚拟dom	解析成js

2. 虚拟dom转换真实dom并挂载到页面 reactDom.render()

react组件

1.创建

函数式

1. 无this指向
2. props是函数参数
3. 没有state
4. 没有生命周期
5. 有返回值

代码格式

import React from 'react
function App(){
	return <div>
		我是函数式组件
		</div>	
}
export default App

类声明式组件

1. this指向组件实例
2. props通过this访问
3. 有state
4. 有生命周期
5. 有返回值

代码格式

import React,{Component} from 'react
class 组件名 extends Component{
	render (){
		return <div>
			我是类组件
			</div>	
	}
}
export default 组件名

生命周期

1. 挂载卸载过程

	1.1 constructor()
	1.2 componentWillMount()
	1.3 componentDidMount()
	1.4 componentWillUnmount ()

2. 更新过程

	2.1 componentWillReceiveProps (nextProps)
	2.2 shouldComponentUpdate(nextProps,nextState)
	2.3 componentWillUpdate (nextProps,nextState)
	2.4 componentDidUpdate(prevProps,prevState)
	2.5 render()

3. React新增的生命周期(个人补充)

	3.1 getDerivedStateFromProps(nextProps, prevState)
	3.2 getSnapshotBeforeUpdate(prevProps, prevState)

组件通信

1. 父组件向子组件传值

父组件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;

2. 子组件向父组件传值

父组件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;           

3. 方便兄弟组件中传值，我知道的实现方式有两种，一种是使用redux，一种是 如图所示的传球：
   
4. 跨级传值 (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