React入门（三）

最新推荐文章于 2024-01-12 10:10:53 发布

失う.

最新推荐文章于 2024-01-12 10:10:53 发布

阅读量479

点赞数

文章标签： react

本文链接：https://blog.csdn.net/weixin_49346957/article/details/119218931

版权

接上篇文章React入门（二）.

属性

PureComponent属性

PureComponent：提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直

import React, { PureComponent } from 'react'
// PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直
// shouldComponentUpdate生命周期发生在：getDerivedStateFromProps 之后，render 之前，
// 该函数会返回一个布尔值（如果为true就让它执行render反之不执行），决定了后续是否 执行 render，首次渲染不会调用该函数
class App extends PureComponent {
  state = {
    name: '标题',
    list: ['夏日冷饮-1', '夏日冷饮-2', '夏日冷饮-3']
  }
  render() {
   let { name, list } = this.state
    return (
      <div>
        {/* 这种的添加在Component的情况下是可以添加的 在PureComponent的情况下是不能添加的 */}
        {/* <button onClick={() => {
          list.push('我是添加的');
            this.setState({
              list
            })
        }
        }>添加</button> */}
        {/* 这种添加在Component和PureComponent下都可以添加 */}
        <button onClick={() => {
          list.push('我是添加的');
            this.setState({
              list:[...list]
            })
        }
        }>添加</button>
      </div>
    )
  }
}

export default App;

ref

作用：获取到当前所在的所有dom节点在那个标签里面用就获取那个
ref 一般是在组件挂载完成之后及更新之后使用

看一个小案例（这里面需要安装一个滚动条的插件）
插件命令：npm install better-scroll --save

import React,{Component} from 'react'
// 引入滚动条插件
import BScroll from 'better-scroll';
class Ref extends Component{
    // ref是在 组件挂载完成之后及更新之后使用
    componentDidMount(){
        // console.log(this.refs.box);
        // 这个写完就可以按住屏幕滑动内容了
        new BScroll(this.refs.box)
    }
    render(){
        let list=[...(','.repeat(100))]
        return (
            <div style={
                {
                width:"100px",
                height:"200px",
                border:"1px solid #000",
                overflow:"hidden"}
            }
            // 这样会获取到这个div
            ref='box'
            >
                <ul style={
                    {margin:0,
                    padding:0,
                    listStyle:"none"}
                } 
                >
                    {
                    list.map((item,index)=>{
                        return <li key={index}>这是第{index}个</li>
                    })}
                </ul>        
            </div>
        )
    }
}
export default Ref

children属性

children属性：组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
这个属性方便于父子传值

import React, { PureComponent } from 'react'

class Child extends PureComponent {

    render() {
            //子级用props来接收
        //这里打印 可以看到内容是在children中的
        console.log(this.props);
        let {children}=this.props
      return (
        <div>
            {children}
        </div>
      )
    }
  }

class App extends PureComponent {

  render() {
    return (
        //这里向子级里面传内容
        <Child>
            <h1>我是h1</h1>
            <p>我是p</p>
        </Child>
    )
  }

}

export default App;

dangerouslySetInnerHTML属性

他有两个{{}} // 第一个括号是解析js语法第二个括号是一个js对象

import React, { PureComponent } from 'react'
class App extends PureComponent {
  render() {
    let message=`<h1>我来了<h1>`
    return (
      <div>
        {/* 必须接收后端发过来的校检后的数据 这边先任意定义一个数据做测试*/}
        <div dangerouslySetInnerHTML={
            {__html:message}
           }></div>
      </div>
    )
  }
}

export default App;

函数式组件

函数组件：没有 state ，this 和生命周期，所以又被称为无状态组件，在早期 react 版本中，被当前纯渲染组件来用
必须定义return return后面定义的是该组件要渲染的内容
该组件第0个参数是props，接收父级传来的信息

import React from 'react'
function Child(props){
	//接收参数
	return <div>{props.info}</div>
}
function fn(){    
    return (<div>
    //传参数
        <Child info={'张'}></Child>
    </div>)
}

export default fn;

Hook

它是：让你在不编写 class定义类的情况下使用 state 以及其他的 React 特性（）
优势：
1.可以使你在无需修改组件结构的情况下复用状态逻辑(自定义hook)
2.类组件难以理解,影响组件预编译,可以使你在非 class 的情况下可以使用更多的 React 特性

基本使用

只在React函数中调用Hook
父组件

//需要引入useState文件
import React, { useState } from 'react'
//引入子组件
import Child from './child'
function Parent() {
    // 声明一个新的叫做 name 的 state 变量
    // let [状态的值,修改状态的方法]=userState(状态的初始值)
    // 字符串格式的写法
    // let [name,setName] = useState("我是parent")
    // 对象格式的写法
    let [data, setName] = useState({
        name: '哈哈',
        sex: 'nan',
        age:10
    })
    // 字符串格式的
    // return <div>
    //     <Child info={name} />
    //     <button onClick={
    //         () => {
    //             setName('我被修改了')
    //         }
    //     }>点一点</button>
    // </div>
    // 对象格式的
    return <div>
        <Child info={data} />
        //点击修改
        <button onClick={
            () => {
                setName({
                    name: '嘿嘿',
                    sex: 'nv',
                    age:10
                })
            }
        }>点一点</button>
    </div>
}
export default Parent

子组件

import React,{useState} from 'react'

function Child(props){
//接收参数
    console.log(props);    
    return <div>
   	 	{/* 输出到页面上 */}
   	 	
        {/* 字符串的打印 */}
        {/* <h1>{props.info}</h1> */}
        {/* 对象的打印 */}
        <h1>{props.info.name}</h1>
        <h1>{props.info.sex}</h1>
        <h1>{props.info.age}</h1>
    </div>

}
export default Child

useEffect方法

useEffect相当于 componentDidMount（挂载完后） and componentDidUpdate（更新完成后）

这里是配合着上面的父组件使用的

//引入useEffect文件
import React,{useState, useEffect} from 'react'

function Child(props){
    console.log(props);
    // 你会发现刚开始就是输出useEffect 然后等组件发生变化他也会触发一次
    // 只在函数中使用useEffect
    useEffect(()=>{
        console.log('触发了useEffect');
        // 组件发生改变后先触发return中的内容
        return ()=>{
            console.log('return');
        }
        // 第二个参数是当age发生变化的时候才会触发return 如果不写的话那就是组件发生改变后触发
    },[props.info.age])
    
    return <div>
        {/* 字符串的打印 */}
        {/* <h1>{props.info}</h1> */}
        {/* 对象的打印 */}
        <h1>{props.info.name}</h1>
        <h1>{props.info.sex}</h1>
        <h1>{props.info.age}</h1>
        
    </div>

}
export default Child

自定义Hook

自定义hook 名称必须是以use开头的
定义Hook

import React,{useState} from 'react'
// 自定义的hook 名称必须是以use开头的
function useSize(){
    let [data,setData]=useState('哈')
    return [
        data,
        //这个参数接收修改后的值
        (da)=>{
            console.log(da);
            setData(da)
        }   
    ]
}
// 暴露出去
export {useSize}

使用你自定义的那个Hook

import React, { useState } from 'react'
//引入你自定义的Hook文件 userSize是你的自定义Hook的函数名字
import {useSize} from './hook'
function Parent() {
    let [mz,setData]=useSize()
    return <div>
    //显示数据
        {mz}
        //修改自定义Hook的值
        <button onClick={
            ()=>{
                setData('hei1')
            }
        }>
            自定义hook
        </button>
    </div>
}
export default Parent