react
Dilomen
这个作者很懒,什么都没留下…
展开
-
react的context
当我们需要使用到一个数据,需要传递多层的时候,props往往显得心累,而我们又不需要引入redux的时候,可以使用react的context首先使用createContext创建一个一个context,它会有两个方法Provider和Consumer,功能如同字义,一个是提供者,就是数据的发起者,一个是消费者,就是数据的接受者createContext生成的Provider对应Cos...原创 2020-01-08 22:02:32 · 175 阅读 · 0 评论 -
location.hash让路由跳转继续保持在当前页面
场景:单页面应用开发时,有时候我们会遇到,一个页面弹出一个弹框,覆盖了整个屏幕,但是不是一个新页面,一直在同一个页面,并且没有提供返回按钮,那么用户就会点浏览器上的回退按钮,这样就会跳到前一个页面,而你只是想继续在这个页面,只是让它将这个弹框关闭分析:当用户点击浏览器的回退按钮,继续保持在当前页面解决:多加一层路由,既想保持在当前页面,又想加入新的路由,那么只能通过hashRouter的想...原创 2019-12-27 23:01:58 · 806 阅读 · 0 评论 -
React.forwardRef让父组件获得子组件的dom
// RefParent.jsimport RefChild from "./RefChild";const textInput = React.createRef();console.log(textInput)const RefParent = () => { return <RefChild ref={textInput}></RefChild>...原创 2019-10-26 14:19:40 · 1067 阅读 · 0 评论 -
react的setState的执行机制
介绍react 中组件本身的状态是通过 state 来维护的,但是 state 不能直接进行修改,必须使用 setState 方法,将修改的 state 和原来的 state 进行比较,组成一个新的 state使用constructor(props) { super(props); this.state = { value: 1 }}compone...原创 2019-09-19 19:22:02 · 377 阅读 · 0 评论 -
react通过ref执行子组件的事件
场景:一个输入框组件,我要在父组件触发一个事件,来触发输入框组件的focus聚焦父组件handleClick = () => { this.SubInput.handleFocus() } render() { return ( <div> <SubItem ref={ref => this.SubInput ...原创 2019-09-17 11:48:46 · 1966 阅读 · 0 评论 -
初试React Hook
什么时候需要用到hook?编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class,现在可以在现有的函数组件中使用 Hook,同时它也简化来一些原先需要生命周期等操作useState:返回一个两个参数的数组,第一个参数是变量,第二个是函数function Test() { const [count, setCount] = useState(...原创 2019-07-04 10:42:51 · 213 阅读 · 0 评论 -
简化connect写法
通过babel让JS程序支持装饰器Babel >= 7.xnpm install --save-dev @babel/plugin-proposal-decorators{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ]}babel@6.x 安装插件...原创 2019-04-25 17:22:26 · 444 阅读 · 0 评论 -
redux的使用
首先通过createStore()方法创建一个store,作为保存状态的对象import {createStore} from 'redux'const store = createStore(reducers)如果要使用redux调试工具和中间件import {createStore, compose, applyMiddleware} from 'redux'import ...原创 2019-05-08 14:49:28 · 170 阅读 · 0 评论 -
使用webpack搭建react环境
tip:虽然官方提供了create-react-app的方式来创建react项目,但是还是想用用webpack来搭建下,当然create-react-app也是建立在webpack上的,可以使用npm run eject来调取webpack的配置文件首先创建一个空文件夹,然后通过npm init初始化得到一个package.json文件如果不想一个个安装依赖包,直接复制以下的代码到pack...原创 2019-04-20 21:14:36 · 323 阅读 · 0 评论