React函数式组件、hooks及初识路由(三)

一、前言

        昨天由于有一些事情耽搁,没有学习新的 react 以及发布博客. 而今天呢,这篇内容会分享类组件、函数式组件、hooks的一些方法以及初识 react 路由.接下来我们学习吧!

二、children

        组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容

        可以自定义结构的组件的常用形式 children

当你在组件中定义了标签,你可以在父组件中使用 this.props.children 来获取标签中输入的内容

        代码案例 :

import React,{
   PureComponent} from 'react'

class Popwindows extends PureComponent{
   

  render(){
   
    console.log(this.props)
    let {
   children} = this.props
    return <div>{
   children}</div>
  }
}

class App extends PureComponent{
   

  render(){
   
    return (
      <div>
        <Popwindows>
          <h1>夏天快乐</h1>
          <p>夏天都快过去了</p>
        </Popwindows>
      </div>
    )
  }
}

export default App;

        浏览器效果 :

三、dangerouslySetInnerHTML

直接设置标签的 innerHTML

        代码案例 :

import React,{
   PureComponent} from 'react'

let message = `<h1>欢迎各位伙伴来到我的博客</h1>`

class App extends PureComponent{
   

  render(){
   
    return (
      <div dangerouslySetInnerHTML={
   {
   
        __html:message
      }}>
      </div>
    )
  }
}

export default App;

        浏览器效果 :

四、key 和 id

        key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

        状态中的数据发生变化时,React 会进行新虚拟DOM 和 旧虚拟DOM 的diff比较 :

一. 旧虚拟DOM中找到了与新虚拟DOM相同的key：

(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

二, 旧虚拟DOM中未找到与新虚拟DOM相同的key

根据数据创建新的真实DOM，随后渲染到到页面

        用index作为key可能会引发的问题：

一. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新,界面效果没问题, 效率低。
二. 如果结构中还包含输入类的DOM：
会产生错误DOM更新,界面有问题。
三. 果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

        怎样选择key值：

尽量在循环中避免使用 index 下标作为 key 值,我们可以使用后端传过来的 id,电话号码,编号都可以,因为都是唯一值

        代码展示 :

import React,{
   PureComponent} from 'react'

class App extends PureComponent{
   

  state = {
   
    data:[
      {
   
        id:0,
        content:"第1条数据"
      },
      {
   
        id:1,
        content:"第2条数据"
      },
      {
   
        id:2,
        content:"第3条数据"
      },
      {
   
        id:3,
        content:"第4条数据"
      },
      {
   
        id:4,
        content:"第5条数据"
      },
      {
   
        id:5,
        content:"第6条数据"
      },
      {
   
        id:6,
        content:"第7条数据"
      }<