
react
十里顾情欢
这个作者很懒,什么都没留下…
展开
-
react生命周期钩子函数
import React from 'react';import reactDOM from 'react-dom';class App extends React.Component { constructor(props) { super(props); } static getDerivedStateFromProps(props, state...原创 2020-05-07 20:36:28 · 256 阅读 · 0 评论 -
react表单
非受控组件: 表单元素不受组件控制受控组件: 表单元素的内容 是依赖于本组件的数据; 写了value之后 必须有onChange事件与之对应import React from 'react';import reactDOM from 'react-dom';/** * 非受控组件: 表单元素不受组件控制 * 受控组件: 表单元素的内容 是依赖于本组件的数据; 写了va...原创 2020-05-07 15:24:02 · 116 阅读 · 0 评论 -
react-ref
import React from 'react';import reactDOM from 'react-dom';/* ref=字符串 这种方式 将来会被废弃掉 ref={(el)=>{this.自定义属性=el}} 通用 通过ref 我们可以获取元素 也可以获取组件 跟VUE一致*/class Count extends React.Componen...原创 2020-05-07 15:19:11 · 188 阅读 · 0 评论 -
react插槽
render函数中不能写 this.setState 会造成死递归children 就是一个插槽 写法:{children}react 会把数组中的每一项 原封不动的显示出来import React from 'react';import reactDOM from 'react-dom';// render函数中不能写 this.setState 会造成死递归// childr...原创 2020-05-06 13:04:00 · 185 阅读 · 0 评论 -
react-prop-types
npm add prop-typesimport PropTypes from ‘prop-types’propTypes,defaultProps 这两个词都是 react规定的propTypes 用来设置 props规则defaultProps 用来设置 默认值static propTypes = { // 是用来设置 props的规则 n: PropTypes.nu...原创 2020-05-06 12:02:22 · 193 阅读 · 0 评论 -
react父子组件
谁用谁 谁就是父组件若是用在 原生html标签上的事件 都是react规定好的事件 on驼峰事件名若是用在 组件身上的事件 都是自定义事件父组件向子组件传参:在父组件中添加 子组件子组件中写入行内属性子组件再通过this.props接收参数子组件向父组件传参:在父组件中添加 子组件父组件添加一个自定义事件并且绑给 子组件子组件也添加一个自定义事件 通过this.pro...原创 2020-05-06 11:27:13 · 286 阅读 · 0 评论 -
react-useState
useState 是其中的一个 HookuseState 让 函数组件 拥有和 class组件 相同的特性 stateimport React, { useState } from 'react';import reactDOM from 'react-dom';function App() { const [count, setCount] = useState(10); ...原创 2020-05-06 09:58:57 · 191 阅读 · 0 评论 -
react-setState
1、在react中想让视图更新 必须让render函数重新执行 必须调用 setState这个方法2、setState 其实是把参数对应的这个对象合并到 this.state 中 如果有相同的 属性名 会直接覆盖掉3、setState(对象,函数) 必须传一个对象 也可以传一个函数 函数会在数据更新后执行4、vue DOM更新是异步的5、setState 这个函数执行是同步的 里面的数...原创 2020-05-05 21:06:03 · 86 阅读 · 0 评论 -
react事件
事件 事件名 = {对应的函数体} 函数体一般都在原型上<button onClick={this.add.bind(this, 1, 2, 3)}>添加<button onClick={() => { this.minus() }}>删除import React from 'react';import reactDOM from "react-dom...原创 2020-05-05 15:55:04 · 108 阅读 · 0 评论 -
react属性和状态
vue是双向数据绑定 单向数据流(从上往下流)react是双向数据绑定 单向数据流(从上往下流)react组件中 有两大数据源 属性props 状态stateprops 中存储的是 传进来的数据 相当于 vue组件中的propsstate 中存储的是 当前组件的私有数据 相当于 vue组件中的dataprops 中存储的是 传进来的数据 相当于 vue组件中的props// 不论是...原创 2020-05-05 14:38:28 · 135 阅读 · 0 评论 -
react组件
react组件React组件都是 函数组件名首字母必须大写细分 就是function(函数式组件) 和 class(类组件)function(函数式组件)import React from "react"import ReactDOM from "react-dom"function Com(props) { console.log(props); // 解构赋值...原创 2020-05-05 11:47:37 · 83 阅读 · 0 评论 -
react简易版的实现jsx
在index.js中引用这个即可class Element { constructor(type, prop, children) { // 把这些私有变量 存储到实例上 方便后面的函数调用 this.type = type this.prop = prop this.children = children } ...原创 2020-05-05 11:48:19 · 356 阅读 · 0 评论 -
认识react
vue mvvm模式 vm:viewModelM(数据)->VM->V(视图)vue vue-cli vue脚手架 vue create 项目名react mvc模式 c:controllerM(数据)->C->V(视图)react create-react-app react脚手架 create-react-app 项目名(npm i -g create-re...原创 2020-05-05 11:48:57 · 150 阅读 · 0 评论