react知识点

1.react的基础

构建用户界面的javascript库
组件化
单向数据化
生命周期
虚拟dom
hooks

2.jsx语法

方便js中书写html模板，javascript和html混合写法
1.只有一个根节点
2.{} js表达式
3. {/* 注释内容 */}
4. className定义类名
5. 样式对象会自动展开
6. 数组可以包含html，并自动展开

3.react的组件

函数组件：

function App(){
  return <div>....</div>
}
export default App;

类组件：

import React,{Componet} from 'reat'

class App extends Componet{
  constuctor(props){
    super(props)
  }
state = {num:5}
render(){
  return <div>...</div>
  }
}
export default App

区别：

函数组件通常展示
类组件通常作为容器

类组件可以有state，管理数据用类组件
函数组件没有state

函数组件没有this
类组件有this

函数组件没有生命周期
类组件有生命周期

4.模板语法

文本：1.普通文本：{文本内容}

            2.html文本：<div dangerouslySetInnerHTML=={{__html:html文本内容}}>

条件渲染
   1. {flag&&<h1>为true显示</h1>}
   2. {flag？‘true显示;:'false显示'}

列表渲染：{list.map(item=><h3 key={item}>{item}</h3>)}

5.事件

和原生js事件一致  事件命名用驼峰式
onclick  onClick
onmouseover  onMouserover

事件总是要响应一个函数

<h1 onClick={()=>{alert("abc")}}>
事件响应 箭头函数

doit = () =>{alert("你好")}

<h1 onClick={this.doit}>
事件响应定义好的函数

事件传参：

<h1 onClick={()=>{this.add(参数)}}>
<h2 onClick={this.add.bind(this,参数)}>

6.state

react组件的状态/数据
this.setState({k:新的值})

当state发生变化，引用state的视图会自动更新

7.表单的数据绑定

<input value={this.state.msg} onChange={this.changeMsg}>

changeMsg =>this.setState({msg:e.target.value})

8.组件

定义组件
src/components/Steper.js

在App.js导入组件
import Steper from './components/Steper'
在App.js render函数中使用
<Steper></Steper>

组件类的首字母必须大写

9.组件传参

父传子props：                父组件传递                                子组件接受
                                       <Steper num={5}>                     props.num

默认参：        Steper.defaultProps = {
                                  num：1
                        }

子传父，执行父组件的传递过来的props回调函数
子传父：执行回调函数

子传父                        父组件:
                                        定义函数并把函数传递给子组件
                                        updateSize = (n)=>this.setState({size:n})
                                        <Steper updateSize={this.updateSize}>

10.组件的设计

容器组件
   1. 一个页面，一个容器组件
   2. 数据中心，与数据处理组中心
   3.类组件

视图组件
    1.显示内容，一个视图组件
    2.只有props没有State
    3.函数组件

11.生命周期

三个阶段         

1.挂载阶段

01 constructor 构造函数

02 static getDerivedStateFromProps

03 render 渲染函数

04 componentDidMount 组件以及挂载

 2.更新阶段

01 static getDerivedStateFromProps

02 shouldComponentUpdate 组件是否更新(返回true才更新)

03 render 渲染

04 getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate 第三个参数)

05 componentDidUpdate 组件已经更新

 

3.卸载阶段

componentWillUnmount