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
  1. 虚拟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 ()
  1. 更新过程
	2.1 componentWillReceiveProps (nextProps)
	2.2 shouldComponentUpdate(nextProps,nextState)
	2.3 componentWillUpdate (nextProps,nextState)
	2.4 componentDidUpdate(prevProps,prevState)
	2.5 render()
  1. 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;
  1. 子组件向父组件传值

父组件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,
                这个地方还是要强调,thisthisthis
                <button onClick={this.clickFun.bind(this, this.state.childText)}>
                    click me
                </button>
            </div>
        )
    }
}
 
export default ComentList;           
  1. 方便兄弟组件中传值,我知道的实现方式有两种,一种是使用redux,一种是 如图所示的传球:
    在这里插入图片描述
  2. 跨级传值 (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
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是React中常用的一些知识点: 1. 组件:React将用户界面拆分为可重用的组件,组件是构建React应用的基本单元。组件可以是函数组件或者类组件。 2. JSX:JSX是一种类似于HTML的语法扩展,可以在JavaScript代码中编写类似HTML的结构。它允许我们以声明式方式描述UI组件的结构。 3. Props:Props是组件的属性,用于传递数据和配置参数给组件。通过props,我们可以向子组件传递数据并进行组件之间的通信。 4. State:State是用于存储和管理组件内部的数据的对象。当state发生变化时,React会自动重新渲染组件,并更新相应的视图。 5. 生命周期:React组件具有生命周期方法,这些方法在组件的不同阶段被调用,例如组件被创建、更新、卸载等。 6. Hooks:Hooks是React 16.8版本引入的特性,它允许我们在无需编写类组件的情况下使用状态和其他React特性。常用的Hooks包括useState、useEffect、useContext等。 7. 条件渲染:React允许我们根据条件来渲染不同的内容或组件。常用的条件渲染方式包括if语句、三元表达式和逻辑与(&&)运算符等。 8. 列表渲染:React提供了map方法来遍历数组或者列表,动态生成列表项。通过列表渲染,我们可以根据数据动态生成多个相似的组件。 9. 表单处理:React提供了一些事件和处理函数来方便地处理表单的输入和提交。通过onChange事件,我们可以监听表单元素的值变化,并将其保存到组件的state中。 10. 组件通信:React中的组件通信可以通过props、状态提升、上下文(Context)和局状态管理工具(如Redux)等方式来实现。 这些是React中常用的知识点,当然还有更多深入的内容和特性可以学习和掌握。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值