part1_React(Hook)

参考文章

https://zhuanlan.zhihu.com/p/208551225

命令

  1. 创建项目
    $ npx create-react-app my-app
    $ cd my-app
    $ npm start
    
  2. 查看react版本
    // 进入项目目录
    $ npm info react
    
  3. create-react-app会自动使项目成为git仓库,除非应用是在一个已经存在的仓库中创建的。在项目根部运行rm -fr .git命令可清除仓库设置。

React Hook

setState的异步执行
参考
散点
  • 在React中是禁止直接改变状态的,因为它可能导致意想不到的副作用。改变状态必须始终通过将状态设置为一个新的对象来完成。如果前一个状态对象的属性没有改变,它们需要简单地复制,这可以通过将这些属性复制到一个新的对象中,并将其设置为新的状态来完成。
  • 涉及到数组类型的状态更新时,能使用.concat(不改变原数组,返回新对象)方法就不要使用.push(改变数组,返回原数组)方法。React组件的状态是不能直接改变的。即使改变状态在某些情况下看起来是有效的,它也会导致很难调试的问题。
  • useState函数(以及课程后面介绍的useEffect函数)不能从循环、条件表达式或任何不是定义组件的函数的地方调用。这样做是为了确保Hook总是以相同的顺序被调用,如果不是这样的话,应用将表现得不正常。
  • 事件处理程序被定义为一个函数调用,这意味着事件处理程序实际上被分配了函数的返回值
    正常情况下 事件处理程序只能是函数或者函数引用
     const hello = () => {
     const handler = () => console.log('hello   world')
     return handler
     }
    

箭头函数中=>后花括号影响

带有花括号默认无返回值需要定义return才有返回值,带有小括号的默认有返回值。

数组

数组的内容可以被修改,尽管它被定义为const。因为数组是一个对象,这个变量总是指向同一个对象。然而, 数组的内容随着新项目的加入而改变.

  • 遍历数组
    遍历数组项目的一种方法是使用forEach,如图所示。forEach接收一个用箭头语法定义的函数作为参数。forEach为数组中的每个项调用函数,总是传递单个项作为参数。作为forEach参数的函数也可以接收其他参数。
     value => {
      console.log(value)
    }
    
  • .concat方法
    该方法不会将项目添加到数组中,而是创建一个新的数组,其中同时包含旧数组和新项目的内容。
  • .map方法
    接受旧数组作为参数,创建新数组 例如创建一个各项值都为原项两倍的新数组
    也可以将数组转化为完全不同的东西。
     const m2 = t.map(value => '<li>' + value + '</   li>')
     console.log(m2)
    // [ '<li>1</li>', '<li>2</li>', '<li>3</li>' ] is    printed
    
     const t = [1, 2, 3, 4, 5]
    
    const [first, second, ...rest] = t
    
    console.log(first, second)  // 1, 2 is printed
    console.log(rest)          // [3, 4, 5] is printed
    

this

  • 新建一个对象,包括属性和方法,当通过创建另外一个对象引用调用方法时,原始方法中this的引用失效。
  • .bind方法可以保存原先的this引用
  • 深入了解js中的this

对象传播

 const handleLeftClick = () => {
  const newClicks = {
    ...clicks,
    left: clicks.left + 1
  }
  setClicks(newClicks)
}

const handleRightClick = () => {
  const newClicks = {
    ...clicks,
    right: clicks.right + 1
  }
  setClicks(newClicks)
}

函数调用,函数引用,函数的区分

points

  • 大括号内的任何内容都会被计算。
  • 底层上,由React组件返回的JSX被编译成JavaScript。而不是返回HTML标记。
  • 编译是由Babel处理的。用create-react-app创建的项目被配置为自动编译。
  • jsx的所有标签都需要被关闭,html中的换行符可以是<br>,但是jsx中必须是<br/>.
  • 一个强制的惯例是在应用的组件树的顶端有一个叫做App的根组件。然而,正如我们将在第6章中了解到的,有些情况下,组件App并不完全是根,而是被包裹在一个适当的实用组件中。
  • React组件名称必须大写。如果使用小写的组件,React只会创建一个空的同名元素,即内置的HTML元素,而不是同名的自定义React元素。
  • React组件的内容(通常)需要包含一个根元素。也可以使用一个<></>空元素包裹。
  • 不要在组件之内定义组件
  • Component
    文件App.js现在定义了一个名为App的React组件。在文件index.js的最后一行的命令:
    ReactDOM.createRoot(document.getElementById  ('root')).render(<App />)
    
    将其内容渲染到div-元素中,该元素在文件public/index. html中定义,其id值为’root’。

index.js格式

  1. Raact17
     import ReactDOM from 'react-dom'
     import App from './App'
    
     ReactDOM.render(<App />, document.getElementById   ('root'))
    
  2. React18
     import React from 'react'
     import ReactDOM from 'react-dom/client'
     
     import App from './App'
     
     ReactDOM.createRoot(document.getElementById    ('root')).render(<App />)
    

js有关参考

  • javascriptMDN
  • [javascript再认识](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于React Hook实现点击弹窗外隐藏弹窗,可以使用useRef和useEffect来实现clickoutside的效果。 首先,在弹窗组件中定义一个ref,用来获取弹窗元素的DOM节点: ```javascript const modalRef = useRef(null); ``` 然后在组件中使用useEffect监听document的点击事件,判断点击位置是否在弹窗之外,如果是,则隐藏弹窗: ```javascript useEffect(() => { function handleModalClickOutside(event) { if (modalRef.current && !modalRef.current.contains(event.target)) { // 点击弹窗外部,隐藏弹窗 hideModal(); } } document.addEventListener('click', handleModalClickOutside); return () => { document.removeEventListener('click', handleModalClickOutside); }; }, [hideModal]); ``` 这样,当点击document的时候,会触发handleModalClickOutside函数,判断点击位置是否在弹窗之外,如果是,则调用hideModal函数隐藏弹窗。 完整的代码如下: ```javascript import React, { useRef, useEffect } from 'react'; function Modal({ children, hideModal }) { const modalRef = useRef(null); useEffect(() => { function handleModalClickOutside(event) { if (modalRef.current && !modalRef.current.contains(event.target)) { hideModal(); } } document.addEventListener('click', handleModalClickOutside); return () => { document.removeEventListener('click', handleModalClickOutside); }; }, [hideModal]); return ( <div className="modal" ref={modalRef}> {children} </div> ); } export default Modal; ``` 使用的时候,只需要在父组件中传入hideModal函数即可: ```javascript import React, { useState } from 'react'; import Modal from './Modal'; function App() { const [showModal, setShowModal] = useState(false); function handleShowModal() { setShowModal(true); } function handleHideModal() { setShowModal(false); } return ( <div className="app"> <button onClick={handleShowModal}>Show Modal</button> {showModal && ( <Modal hideModal={handleHideModal}> <h1>Modal Content</h1> </Modal> )} </div> ); } export default App; ``` 这样,当点击弹窗外部时,会隐藏弹窗。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值