React全家桶核心知识点(一) - 基础原理

2021-02-24 react

一、虚拟DOM的两种创建方式

使用JSX创建虚拟DOM

//1.创建虚拟DOM
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
    <span>Hello,React</span>
    </h1>
  )
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

使用JS创建虚拟DOM

//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

关于虚拟DOM：

1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

二、jsx语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}。
样式的类名指定不要用class，要用className。
内联样式，要用的形式去写。
1
style={{key:value}}
只有一个根标签
标签必须闭合
标签首字母
(1) 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

三、js语句(代码)与js表达式

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

//模拟一些数据
const data = ['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM = (
  <div>
    <h1>前端js框架列表</h1>
    <ul>
      {
        data.map((item,index)=>{
          return <li key={index}>{item}</li>
        })
      }
    </ul>
  </div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

四、函数式组件 && 类式组件

4.1 函数式组件

执行了ReactDOM.render(…….之后，发生了什么？

React解析组件标签，找到了MyComponent组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

//1.创建函数式组件
function MyComponent(){
  console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
  return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

4.2 类式组件

执行了ReactDOM.render(…….之后，发生了什么？

React解析组件标签，找到了MyComponent组件。
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

//1.创建类式组件
class MyComponent extends React.Component {
  render(){
    //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
    //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
    console.log('render中的this:',this);
    return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
  }
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

4.3 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

4.4 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

五、组件实例的三大属性之一 state

//1.创建组件
class Weather extends React.Component{

  //构造器调用几次？ ———— 1次
  constructor(props){
    console.log('constructor');
    super(props)
    //初始化状态
    this.state = {isHot:false,wind:'微风'}
    //解决changeWeather中this指向问题
    this.changeWeather = this.changeWeather.bind(this)
  }

  //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
  render(){
    console.log('render');
    //读取状态
    const {isHot,wind} = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
  }

  //changeWeather调用几次？ ———— 点几次调几次
  changeWeather(){
    //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
    //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
    //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

    console.log('changeWeather');
    //获取原来的isHot值
    const isHot = this.state.isHot
    //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
    this.setState({isHot:!isHot})
    console.log(this);

    //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
    //this.state.isHot = !isHot //这是错误的写法
  }
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))

state 简写形式

//1.创建组件
class Weather extends React.Component{
  //初始化状态
  state = {isHot:false,wind:'微风'}

render(){
  const {isHot,wind} = this.state
  return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}

//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
  const isHot = this.state.isHot
  this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))

5.1 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)

5.2 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
状态数据，不能直接修改或更新

六、组件实例的三大属性之一 props

6.1 理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

6.2 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

6.3 编码操作

内部读取某个属性值

this.props.name

对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

import PropTypes from 'prop-types.js'
Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

扩展属性: 将对象的所有属性通过props传递

1	Person {...person}/>

默认属性值：

Person.defaultProps = {
  age: 18,
  sex:'男'
}

组件类的构造函数

constructor(props){
  super(props)
  console.log(props)//打印所有属性
}

函数组件使用props

//创建组件
function Person (props){
  const {name,age,sex} = props
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{sex}</li>
      <li>年龄：{age}</li>
    </ul>
  )
}
Person.propTypes = {
  name:PropTypes.string.isRequired, //限制name必传，且为字符串
  sex:PropTypes.string,//限制sex为字符串
  age:PropTypes.number,//限制age为数值
}

//指定默认标签属性值
Person.defaultProps = {
  sex:'男',//sex默认值为男
  age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))

七、组件实例的三大属性之一 refs与事件处理

7.1 理解

组件内的标签可以定义ref属性来标识自己

7.2 编码

字符串形式的ref
1
<input ref="input1"/>

回调形式的ref

1	<input ref={(c)=>{this.input1 = c}}/>

createRef创建ref容器 – 官方最推荐但比较繁琐
1
2
myRef = React.createRef()
<input ref={this.myRef}/>
7.3 事件处理
通过onXxx属性指定事件处理函数(注意大小写)
1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

八、受控组件和非受控组件

包含表单的非受控组件

//创建组件
class Login extends React.Component{
  handleSubmit = (event)=>{
    event.preventDefault() //阻止表单提交
    const {username,password} = this
    alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
  }
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        用户名：<input ref={c => this.username = c} type="text" name="username"/>
        密码：<input ref={c => this.password = c} type="password" name="password"/>
        <button>登录</button>
      </form>
    )
  }
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

包含表单的受控组件

//创建组件
class Login extends React.Component{

  //初始化状态
  state = {
    username:'', //用户名
    password:'' //密码
  }

//保存用户名到状态中
saveUsername = (event)=>{
  this.setState({username:event.target.value})
}

//保存密码到状态中
savePassword = (event)=>{
  this.setState({password:event.target.value})
}

//表单提交的回调
handleSubmit = (event)=>{
  event.preventDefault() //阻止表单提交
  const {username,password} = this.state
  alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}

render(){
  return(
    <form onSubmit={this.handleSubmit}>
      用户名：<input onChange={this.saveUsername} type="text" name="username"/>
      密码：<input onChange={this.savePassword} type="password" name="password"/>
      <button>登录</button>
    </form>
  )
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))

九、高阶函数&函数柯里化

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

function sum(a){
  return(b)=>{
    return (c)=>{
          return a+b+c
    }
  }
}

十、组件的生命周期旧和新

生命周期-旧

初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
  一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
  一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

//创建组件
class Count extends React.Component{

//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}

//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}

//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}

//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}

//组件将要挂载的钩子
componentWillMount(){
console.log('Count---componentWillMount');
}

//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}

//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}

//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}

//组件将要更新的钩子
componentWillUpdate(){
console.log('Count---componentWillUpdate');
}

//组件更新完毕的钩子
componentDidUpdate(){
console.log('Count---componentDidUpdate');
}

render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}

//父组件A
class A extends React.Component{
//初始化状态
state = {carName:'奔驰'}

changeCar = ()=>{
this.setState({carName:'奥拓'})
}

render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}

//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}

//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('B---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('B---componentWillUpdate');
}

//组件更新完毕的钩子
componentDidUpdate(){
console.log('B---componentDidUpdate');
}

render(){
console.log('B---render');
return(
<div>我是B组件，接收到的车是:{this.props.carName}</div>
)
}
}

//渲染组件
ReactDOM.render(<Count/>,document.getElementById('test'))

生命周期-新

初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() =====> 常用
  一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
  一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}

//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}

//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}

//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}

//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}

//在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate');
return 'atguigu'
}

//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}

//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}

//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}

//组件更新完毕的钩子
componentDidUpdate(preProps,preState,snapshotValue){
console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
}

render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
</div>
)
}
}

//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))

重要的勾子

render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器
即将废弃的勾子
componentWillMount
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

十一、Key的作用

react/vue中的key有什么作用？（key的内部原理是什么？）

为什么遍历列表时，key最好不要用index?

虚拟DOM中key的作用：
1. 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2. 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
  随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
  
  a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
  (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  
  b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
  根据数据创建新的真实DOM，随后渲染到到页面
用index作为key可能会引发的问题：
若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。
开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。

Marong

Web Developer & Designer

React全家桶核心知识点(一) - 基础原理

一、虚拟DOM的两种创建方式

二、jsx语法规则

三、js语句(代码)与js表达式

四、函数式组件 && 类式组件

4.1 函数式组件

4.2 类式组件

4.3 注意

4.4 渲染类组件标签的基本流程

五、组件实例的三大属性之一 state

5.1 理解

5.2 强烈注意

六、组件实例的三大属性之一 props

6.1 理解

6.2 作用

6.3 编码操作

七、组件实例的三大属性之一 refs与事件处理

7.1 理解

7.2 编码

7.3 事件处理

八、受控组件和非受控组件

九、高阶函数&函数柯里化

十、组件的生命周期旧和新

生命周期-旧

生命周期-新

重要的勾子

即将废弃的勾子

十一、Key的作用

react/vue中的key有什么作用？（key的内部原理是什么？）

为什么遍历列表时，key最好不要用index?

React全家桶核心知识点(一) - 基础原理

一、虚拟DOM的两种创建方式

二、jsx语法规则

三、js语句(代码)与js表达式

四、函数式组件 && 类式组件

4.1 函数式组件

4.2 类式组件

4.3 注意

4.4 渲染类组件标签的基本流程

五、组件实例的三大属性之一 state

5.1 理解

5.2 强烈注意

六、组件实例的三大属性之一 props

6.1 理解

6.2 作用

6.3 编码操作

七、组件实例的三大属性之一 refs与事件处理

7.1 理解

7.2 编码

7.3 事件处理

八、受控组件和非受控组件

九、高阶函数&函数柯里化

十、组件的生命周期 旧和新

生命周期-旧

生命周期-新

重要的勾子

即将废弃的勾子

十一、Key的作用

react/vue中的key有什么作用？（key的内部原理是什么？）

为什么遍历列表时，key最好不要用index?

十、组件的生命周期旧和新