react
关注
分享
扫一扫
Mrs彬
带你上路，直到入坑
展开
-
10 react表单操作（未封装版） 喜欢点赞加关注！谢谢
import React, { Component } from "react" import { log } from "util"; export default class Form extends Component { constructor() { super() this.state = { user: {//要提交给后端的数据 起名字后端叫什么我们也叫什么 username: '',原创 2021-03-31 22:16:17 · 133 阅读 · 0 评论 -
09 react 事件相关
一、事件绑定 1、如何绑定事件 2、如何传参 3、Event如何获取 4、如何阻止默认事件 5、如何阻止事件传播 二、react 绑定事件的两种方式 1）箭头函数 2）bind export default class Event extends Component { alert1(){ alert(1) } render () { return ( <div> {/* 如何绑定事件原创 2020-12-07 20:50:13 · 164 阅读 · 1 评论 -
react数据操作
import React, { Component } from "react" export default class State extends Component { constructor() { super() this.state = { name: '张三', num: 10, json: { story: "呼号浩特", .原创 2021-03-30 20:26:43 · 273 阅读 · 0 评论 -
react组件传参
一、函数组件传参 父组件传给子组件 父组件 {/* 和vue一样自定义属性传参，接受和vue一样通过props */} <One msg={msg}></One> 子组件 子组件（函数组件） function One(props){ // one组件所有的属性 return( <div>你好我是one组件 {/* 函数组件的第一个参数就是组件的所有信息 */} <p>{props.msg}</p原创 2021-03-16 09:01:17 · 158 阅读 · 0 评论 -
react 经典面试题
React面试题 一、react优缺点 优点： 速度快 跨浏览器兼容 一切皆组件 单项数据流 Jsx语法 缺点： 1）首次加载时间过长(所有单页面都有这个缺点) 2）如果要开发一个大型的项目，只有react是无法实现的，需要借助react-router-dom、redux等插件实现 二、React解决了什么问题 组件化:全部都是组件化 开发效率:组件化，基于webpack，ES6的模块化思想 运行效率:虚拟DOM机制 可维护性:flux | redux（像vuex 也是状态管理，可以快速定位代码的错误）可以原创 2020-12-07 20:44:42 · 193 阅读 · 0 评论 -
08 react中渲染数据
React条件渲染 React条件渲染（主要是三元运算符） import React, { Component } from 'react' class Three extends Component{ render(){ // 还没有说到state所以暂时现在这里定义 var el1=<div>收藏</div> var el2=<div>取消收藏</div> var isTrue=tru原创 2020-12-07 20:42:59 · 145 阅读 · 0 评论 -
07 react中组件的定义方式
1、函数定义 1）在src中新建一个js文件 2）在js内引入react（作用：引入了react才能使用jsx语法） 3）函数中 return的内容就是你要显示在页面上的内容 组件的使用 在index.Js入口文件中引入 App组件 新建一个组件one.js import React from 'react' import WebsiteNav from './websiteNav' function One(props){ // one组件所有的属性 return( &l原创 2020-12-07 20:12:27 · 194 阅读 · 0 评论 -
06 react 脚手架目录结构说明
这里面的都可以不要，都可以删除 Index.js和vue中的main.js一样是入口文件 可以向我们之前写的一样写一个虚拟dom然后渲染 .gitignore 上传git时忽略的文件 这样控制一些文件不用上传gitHup但是本地依然是存在的，只是上传githup时不会上传 Package.json 放的是所有的依赖包 Package-lock.json是自动生成的不用管 Npm run start Npm run build Npm run test Npm run eject 我们使用的是npm .原创 2020-12-06 17:51:29 · 183 阅读 · 0 评论 -
05 react脚手架一次学会
一 。配置环境： 1）安装Nodejs （注意配置环境变量） 2）window+r 打开命令窗口 输入node -v 3）接着输入 npm -v 二、使用npm 可以正常下载react脚手架 但是会很慢解决方法 如下 原下载地址： npm config set registry http://registry.npmjs.org 设置国内淘宝径向 一、安装淘宝镜像就可以使用 cnpm window+r 输入npm install -g cnpm --registry=https://registry.原创 2020-12-06 16:58:49 · 156 阅读 · 0 评论 -
04 react中jsx语法展示数据
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Do原创 2020-12-06 16:40:32 · 183 阅读 · 0 评论 -
03 react体验jsx语法
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Do原创 2020-12-06 16:35:39 · 153 阅读 · 1 评论 -
02 react初次体验-小试牛刀
一、新建一个html文件 二、引入react.js和react-dom.js <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edg原创 2020-12-06 16:29:51 · 109 阅读 · 1 评论 -
01 react简介
React简单介绍 1）React是用于构建用户界面的javascript库 2）react不是mvc模式，它最多只能算是一个View（mvc中的v） 3）react是faceBook开发的 4）react引入了虚拟dom机制 5）react使用了jsx语法 6）react引入了组件化的思想 React解决了什么问题？ 组件化:全部都是组件化 开发效率:组件化，基于webpack，ES6的模块化思想 运行效率:虚拟DOM机制 可维护性:flux | redux（像vuex 也是状态管理，可以快速定位代码的错原创 2020-12-06 16:20:02 · 305 阅读 · 0 评论