react
文章平均质量分 93
一天一丢丢
这个作者很懒,什么都没留下…
展开
-
react之旅(八)React路由
一、react-router和react-router-dom的区别react-router:提供核心的路由组件与函数,不需要直接安装它,安装react-router-dom时会将react-router作为依赖安装react-router-dom:基于react-router,加入了在浏览器运行环境下的一些功能,如 <Link> <BrowserRouter> 这样的 DOM 类组件二、使用react-router-dom可以使用下面命令安装react-router-d原创 2020-07-27 00:07:40 · 161 阅读 · 0 评论 -
react之旅(八)React生命周期
一、react 16前的生命周期1.1 constructorconstructor(props, context)如果想(在组件其他地方是可以直接接收的)使用props或context,则需要以参数形式传入。只要组件存在constructor,就必要要写super,否则this指向会错误1.2 componentWillMountcomponentWillMount () 在组件挂载之前调用,且全局只调用一次。如果在这个钩子里可以setState,render后可以看到更新后的st原创 2020-07-24 06:35:01 · 1085 阅读 · 0 评论 -
react之旅(七) React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一、React中的组件react组件就是自己定义的非html标签,规定react组件首字母大写:class App extends Component{}<App />二、父子组件组件的相互调用中,把调用者称为父组件,被调用者称为子组件:import React from 'react';import Children from './Children';class Up extends React.Component { constructor(props){原创 2020-07-22 06:55:38 · 1194 阅读 · 1 评论 -
react之旅(六)约束性和非约束性组件 input text radio select checkbox textarea 以及获取表单的内容
一、约束性组件和非约束性组件1.1 非约束性组件非约束性组件这样写:<input type="input" defaultValue="123"/>这里的defaultValue就是原生DOM的value,用户输入的值就是vaule的值,react完全不管输入的过程。1.2 约束性组件约束性组件这样写:onChange =(e) => { let dom = e.target; this.setState({ name原创 2020-07-19 09:22:13 · 490 阅读 · 0 评论 -
react之旅(五)react 事件对象;如何获取input框值;键盘事件;实现双向数据绑定
一、事件对象什么是事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息实现下面的场景:点击按钮的时候,将按钮的颜色变为蓝色。import React from 'react';class Demo1 extends React.Component { constructor(props){ super(props); } changeColor =(e) => { e.ta原创 2020-07-19 00:39:30 · 1664 阅读 · 0 评论 -
react之旅(四)react 如何调用方法;获取数据;改变数据;方法传值
本文主要讲解react组件中如何定义方法,调用方法,获取数据,改变数据,方法传值,调用方法时改变this指向。一、react中调用方法import React from 'react';class Demo1 extends React.Component { constructor(props){ super(props); } runFun() { console.log("runfun"); } render(){原创 2020-07-18 22:41:46 · 8907 阅读 · 0 评论 -
react之旅(三)react 如何绑定数据、绑定属性、引入图片、循环数据
本文主要讲解在react组件中如何绑定数据,绑定属性,引入图片,以及如何循环数据。一、react如何绑定数据在模板中(render函数返回的jsx部分)中,用{}来进行数据绑定:import React from 'react';class Home extends React.Component{ constructor(props){ super(props); this.state = { name: "react",原创 2020-07-18 17:16:56 · 3797 阅读 · 0 评论 -
react之旅(二)react项目目录结构,创建组件,绑定数据
本文主要讲解:React目录结构、React创建组件、 ReactJSX语法、 React绑定数据、React绑定对象在上一篇中使用 npx create-react-app demo1命令创建了一个react项目,并且用npm start命令将react项目启动起来。一、项目的目录结构demo1 |--node_modules #npm 包的安装目录 |--public |--index.html #react项目的html文件 |... |--src #src目录,一般代码就放在原创 2020-07-15 23:18:21 · 2226 阅读 · 1 评论 -
react之旅(一)环境准备
本文主要讲解了react项目编写前的准备工作,包括git安装,nodejs的安装,react如何启动一个新的项目。一、windows环境安装git在giit 官网https://git-scm.com/download/win下载git的安装包,一路next即可下载过程中可能会碰到下载超慢的问题,可以利用迅雷进行下载。二、window环境nodejs的安装在nodejs官网http://nodejs.cn/download/下载.msi的windows安装包,一路next即可。.msi和.z原创 2020-07-15 19:12:10 · 392 阅读 · 0 评论