🍀 FourLeaf
Switch language
zh
Switch theme
Light

  • redux-的-reducer-函数不能改变原-state

    可以使用如下方法来完全复制原来的 state, 再进行操作 对于数组: concat, slice, 或 spread operator 对于对象: Object.assign 或 spread operator 参考 valentinog.com

  • Pure-Fuction-纯函数的定义

    Pure Function wiki definition: In computer programming a pure function is a that has the following properties: Its return value is the same for the same arguments. Its evaluation has no side effects. 同样参数总是返回相同的结果, 也就是函数内部没有随机生成的数 没有副作用, 指的是不会改变其它的变量的值, 不会有日志记录等 redux 的 reducer 中使用 纯函数, 输入一个 state, 在不改变输入的 state 的情况下, 返回一个 新的 state

  • webstorm-不提示-react-router-dom-中的-hooks(useRouteMatch-)

    现象: import { BrowserRouter, Switch, // 不提示 Route, // 不提示 NavLink, useRouteMatch // 不提示 } from 'react-router-dom' 原因: // react-router-dom.js export { MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'react-router'; Switch, Route, useRouteMatch … 这类组件(或函数) 不是真正存在于 react-router-dom.js 文件中, 而是存在于 react-router.js 中导致 WebStorm 没有识别出来. 解决办法: 在 package.json 文件的 dependencies 加入 react-router "react-router": "^5.2.0", // 加入此行 "react-router-dom": "^5.2.0", 参考自 stackoverflow: Why does IntelliJ does not auto import react router hooks?

  • react-router-中-path-和-url-的关系

    // jsx let match = useRouteMatch() console.log(match) // isExact: true // params: {topicId: "6"} // path: "/topics/:topicId" // url: "/topics/6" 在动态路由中 其中, path 指的是路由的名称, 路径; url 指的是当前页面真实的地址, 也就是地址栏中显示的 url 在非动态路由中, 二者是一样的

  • react-把一个组件的-props-全部传给子组件

    背景: 自定义了一个 MyNavLink, 统一修改了 activeClassName, 其它属性由 MyNavLink 转发到 NavLink // 定义组件 function MyNavLink(props) { return <NavLink activeClassName='my-active' {...props}/> } // 使用 <MyNavLink to='/home' className='link'}>a link</MyNavLink> 关键: 使用 ... 对 props 进行解构

  • taro-alias

    官方文档: https://taro-docs.jd.com/taro/docs/config-detail 还要引入 path const path = require('path') // 此步骤不能少 const config = { . . . alias: { '@/components': path.resolve(__dirname, '..', 'src/components'), '@/utils': path.resolve(__dirname, '..', 'src/utils'), '@/assets': path.resolve(__dirname, '..', 'src/assets'), '@/static': path.resolve(__dirname, '..', 'src/static') }, . . . }

  • 多个-eventListener,-如何取消

    参考: JavaScript事件机制 背景: 在 taro3.0.2 中, 小程序端使用 onPullDown(), 会造成 h5 端可以下拉, 但是不正常(顶部出现下拉空白, 不可恢复) 后来发现 tao-tabbar__pannel 的 touchmove 事件造成的 于是要关闭这个事件, 但是 使用 removeEventListener 不管用, 使用 addEventListener 覆盖, 会发现会依次执行, 不会覆盖, 于是就有了参考文章里的方法 e.stopImmediatePropagation() async componentDidMount() { // h5 不支持下拉刷新, 下拉会出现空白, 且不消失 if (process.env.TARO_ENV === 'h5') { const obj = document.getElementsByClassName('taro-tabbar__panel') obj[0].addEventListener('touchmove', function (e) { e.stopImmediatePropagation() e.preventDefault() }) } . . . }

  • react-render(),-组件名

    render 方法中只能有一个 顶级父元素 // 正确 render() { <div> <p>1111</p> <p>2222</p> </div> } // 错误 render() { <p>1111</p> <p>2222</p> } 组件类名及 html 标签 的名称必须 首字母大写
🍀