随笔分类 -  React学习

React初步学习过程中对文档的理解
React学习：react-router-dom-主要组件
摘要：React Router中的组件主要有三类: routers, 路由，例如<BrowserRouter> 、 <HashRouter> route matchers,路由匹配 如 <Route> 、<Switch> navigation,导航，如 <Link>、 <NavLink>、<Redirec 阅读全文
posted @ 2019-10-15 20:08 前端小可爱 阅读(1299) 评论(0) 推荐(0)
React学习：组合VS继承
摘要：组合其实类似于vue的slot插槽 1.包含关系 默认插槽为props.children。eg： 还可以使用类似Vue的具名插槽。eg： 虽然在理解上我们可以理解为插槽类的东西在用，但是react上并没有插槽的概念，所有东西都是可以用参数进行传递。 关于继承 Props 和组合为你提供了清晰而安全地 阅读全文
posted @ 2019-09-28 15:47 前端小可爱 阅读(617) 评论(0) 推荐(0)
React学习：状态提升
摘要：多个组件使用共同的状态进行变化的时候，考虑这个状态放在父组件上。 可变数据应保证只有一个数据源，如果两个组件需要相同的state，应该把它提升到相同的父组件中，所有改变也是通过父组件去改，子组件书写 this.props.父组件方法（参数），父组件写：<子组件 子组件调用方法名={func}>。 该 阅读全文
posted @ 2019-09-28 11:11 前端小可爱 阅读(188) 评论(0) 推荐(0)
React学习：form表单
摘要：在React中，form表单元素和其他的DOM不一样，因为表单元素通常会保留一个内部的state状态。 1.受控组件 对于受控组件的好处是：每一个表单都有一个单独处理它的state，这样比较容易方便进行用户输入的校验和限制 2.textarea标签 3.select标签 与vue类似，所有选中以及c 阅读全文
posted @ 2019-09-27 10:40 前端小可爱 阅读(9744) 评论(0) 推荐(0)
React学习：列表&&Key
摘要：在React中，把数组转化为元素，和js的map方法类似，返回一个数组类的元素 1.渲染多个组件 可以使用{}在jsx中构建一个元素集合 2.基础组件列表 通常你需要在组件中去渲染一个列表，而不是构建一个元素集合，此时可以把上述构建抽离为一个组件。 此时运行会报没有key的警告，需要进行key的添加 阅读全文
posted @ 2019-09-25 18:04 前端小可爱 阅读(438) 评论(0) 推荐(0)
React学习：条件渲染
摘要：在react中的条件渲染和Vue不一样，react使用的是：使用不同的组件进行封装，然后根据使用的场景再来判断使用哪一个组件 React中的条件渲染和js中的一样，使用js或者其他条件运算符进行不同组件的渲染 1.元素变量 可以使用变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染 阅读全文
posted @ 2019-09-24 11:25 前端小可爱 阅读(400) 评论(0) 推荐(0)
事件处理
摘要：react元素的时间处理和DOM的很相似，只是语法上面有一点区别 区别： 1.react属性命名为小驼峰 && 如果使用jsx语法，需要传入的是一个函数，而不是字符串（eg：onClick={click}） 2.react阻止默认事件不能是return false了，必须使用preventDefau 阅读全文
posted @ 2019-09-03 17:23 前端小可爱 阅读(165) 评论(0) 推荐(0)
state&生命周期
摘要：类和函数声明的区别： 函数声明的组件没有生命周期，类声明的组件有它自己的生命周期和局部状态等等特性 之前提过元素渲染之后是不可变的，为了解决这个问题，我们需要做以下做来实现改变 1.组件声明为类声明 2.添加一个类构造函数来初始化 class Welcome extend React.Compone 阅读全文
posted @ 2019-09-03 14:42 前端小可爱 阅读(314) 评论(0) 推荐(0)
react学习：组件&props
摘要：定义组件 1.函数定义组件：（此函数为有效的React组件，它接收一个单一的“props”对象并返回了一个React元素） function Welcome（props） { return <div>hello , {props.name}</div> } 2.使用es6的class进行定义 cla 阅读全文
posted @ 2019-09-02 14:04 前端小可爱 阅读(797) 评论(0) 推荐(0)
react学习：元素渲染
摘要：将元素渲染到 DOM 中 一般来讲跟vue类似，只需要一个根节点，其渲染方式为 ReactDOM.render(<h1>Hello, world</h1>，document.getElementById('root'))。 更新元素渲染 react渲染之后，是不可变的，如果想要更改，需要重新执行他的 阅读全文
posted @ 2019-08-30 10:39 前端小可爱 阅读(262) 评论(0) 推荐(0)