react学习笔记
在学习react如何使用做的笔记
程序员徐小白
程序员徐小白,专注于Java后端研发领域。
同名微信公众号,我会第一时间在上面分享我的学习笔记,还有各种学习资料。
展开
-
React中的react-redux
1.作用在redux的基础上实现state数据改变时自动渲染2. 几个概念Provider组件:自动的将store中的state与组件进行关联映射方法:这里需要两个映射方法,分别将store的state和dispatch映射到组件中Connent方法:将组件和store中的数据与方法进行连接3.安装 cnpm i react-redux --seve4.基本使用导入r...原创 2020-02-19 17:16:11 · 82 阅读 · 0 评论 -
React中的的数据管理Redux
1.作用用于中大型的应用,当数据比较庞大,组件之间数据交互较多时使用解决组件的数据通信解决数据数据和交互较多的应用解决React的数据管理问题2.几个概念store:数据仓库,保存数据的地方state:一个对象,存放了整个应用所需要的数据action:一个动作,触发改变数据的方法dispatch:将动作触发成方法reducer:一个函数,通过获取action,改变数据,生...原创 2020-02-19 16:10:51 · 200 阅读 · 0 评论 -
React中的路由
1.安装react-router-domwebpack的安装命令:cnpm i react-router-dom2.使用react-router-dom导入react,react-dom,react-router-domimport React from 'react'import ReactDOM from 'react-dom'import {HashRouter as R...原创 2020-02-19 13:39:03 · 219 阅读 · 0 评论 -
React中组件的props.children
props.children是用于将从父组件传递过来的标签放置到子组件中1.创建父组件首先引入react和reactdomimport React from 'react'import ReactDOM from 'react-dom'创建父组件class ParentDom extends React.Component{ constructor(){ ...原创 2020-02-18 19:05:05 · 2225 阅读 · 0 评论 -
React中的生命周期
主要指的是继承React.Component创建出来的组件的生命周期参考vue的生命周期做的笔记,react和vue的生命周期都差不多,有错的可以告诉我,我再改1.生命周期的状态created:组件被创建了mounted:组件被挂载到DOM中了updated:组件被挂载到浏览器上了unmounted:组件被销毁了2.生命周期中的钩子函数componentWillMoun...原创 2020-02-17 21:19:21 · 105 阅读 · 0 评论 -
React中的组件切换
代码直接上代码了import React from 'react'import ReactDOM from 'react-dom'function UserLogin(){ return <h1>登陆</h1>}function UserRegister(){ return <h1>注册</h1>}class User...原创 2020-02-17 17:37:20 · 2829 阅读 · 0 评论 -
React组件中的事件
1.特点方法名称:React中采用了驼峰命名法,从第二个单词的字母开始大写原生js的写法是全部小写vue中是通过v-on:加上触发事件(也是全小写的,但是没有on)传值:React中事件接受的值是一个方法,需要用{}包裹起来原生js的事件接受的值是一个字符串vue中的事件接受的值是一个字符串(方法名称)2.事件的默认参数class EventTest extends Rea...原创 2020-02-17 16:06:57 · 326 阅读 · 0 评论 -
React中组件的传值方式
1.父组件给子组件传值import React from 'react'import ReactDOM from 'react-dom'class Holle extends React.Component{ constructor(){ super() this.state={ msg:'这是子组件的私有数据' ...原创 2020-02-17 13:22:36 · 1164 阅读 · 0 评论 -
在React中实现数据的双向绑定
1.将数据渲染到页面中创建一个.jsx文件import React from 'react'export default class MyInput extends React.Component{ constructor(){ super() this.state={ msg:'123' } } ...原创 2020-02-16 20:30:56 · 1684 阅读 · 0 评论 -
在React中修改state上的数据
1.定义组件新建一个.jsx文件import React from 'react'export default class MyBtn extends React.Component{ constructor(){ super() this.state={ msg:'123' } } render...原创 2020-02-16 19:15:51 · 1470 阅读 · 0 评论 -
在React的组件中绑定事件
1.给组件绑定事件创建组件,并绑定方法创建一个.jsx文件import React from 'react'export default class MyBtn extends React.Component{ constructor(){ super() this.state={ } } render(){...原创 2020-02-16 18:51:37 · 1326 阅读 · 1 评论 -
在react组件中使用样式
1.行内样式class 组件名称 extends React.Component{ render(){ return <div style={{color:'red',border: '1px'}}></div> }}样式值为字符串类型时,需要用单引号包裹使用双花括号包裹样式使用外部样式定义classNameclass 组件名称 extends ...原创 2020-02-16 14:16:53 · 1005 阅读 · 0 评论 -
react中创建组件的方式
方式一定义一个fuction//fuction的名称一定要大写开头fuction Holle(){ //返回的值必须是一个虚拟DOM对象,或null return <h1>holle</h1>}将组件渲染到页面//定义的组件可以直接当作一个标签来使用ReactDOM.render(<Holle></Holle>,docum...原创 2020-02-15 13:24:03 · 120 阅读 · 0 评论 -
jsx的语法
1.定义写在js文件中的html格式的语言jsx比html严格多了,每个元素必须要有闭合2.定义虚拟DOM对象直接使用html标签就可以定义虚拟DOM对象var div=<div>123456</div>3.插值表达式{}插值表达式内可以写数字,字符串,boolean值当需要在jsx控制的区域内引用js中的对象时,就需要使用{}var aa=111va...原创 2020-02-14 23:59:37 · 211 阅读 · 0 评论 -
配置babel启用jsx语法
html是最优秀的标记语言,使用js对象来创建虚拟DOM对象太麻烦了,最好就能使用html语法来写虚拟DOM这种混合写在js中的html标签,叫做JSX,但是webpack无法打包除了js之外的语言,所以在编译时,会将这种html标签转换为js对象,这就需要使用babel来将html标签转换为js对象1.安装babel插件安装两套包第一套包(工具包)npm install babel...原创 2020-02-14 18:53:09 · 2174 阅读 · 0 评论 -
webpack项目中react的基本使用
1.安装react react-domcnpm i react react-dom -Sreact 专门用来创建组件和虚拟DOM的,提供了组件的生命周期 react-dom专门进行对DOM的操作,将组件和虚拟DOM渲染到浏览器中2.在.js文件中导入import React from 'react'import ReactDOM from 'react-dom'这里的接收名称...原创 2020-02-14 15:32:42 · 108 阅读 · 0 评论