随笔分类 - react的用法
react的从基础到开发
摘要：创建完新项目后再src文件夹内新增文件setupProxy.js（必须是这个文件名，） // 此文件是创建create-react-app脚手架创建的项目,它提供一个网络代理的配置文件 // 此文件是运行在nodejs环境中,所以模块化使用commonjs // 此文件的修改一定要重启项目 // 在
阅读全文
摘要：首先创建react项目可以先下载脚手架create-react-app(类似于vue的脚手架vue-cli)。 1、打开****cmd，执行：npm install -g create-react-app ； 全局安装。 如果执行失败，可能是node版本问题， react文档中要求Node >= 8
阅读全文
摘要：高阶组件(Higher Order Component,HOC)并不是React提供的某种API,而是使用React的一种模式,用于增强现有组件的功能。高阶应用有三个： React.memo() connect() withRouter() 1.React.memo() 给函数式组件提升性能 涉及到
阅读全文
摘要：以Visual Studio Code软件为例，再软件商店下载一个插件即可 1.在软件商店搜ES7 React/Redux/GraphQL/React-Native snippets会出现 2.此时再创建一个react的js文件，在英文状态下输入rcc后按回车键。 3.此时就会根据文件名创建一个以文
阅读全文
摘要：生命周期，钩子函数： 挂载阶段： 一、constructor （第一个执行） 1.可以初始化组件状态 2.可以给一些事件函数绑定this 注意：不能再内部调用setState() constructor(){ super() this.state={ n:1 } //不能在内部调用setSt
阅读全文
摘要：非受控组件 非受控组件：这时表单数据将交由 DOM 节点来处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值） 要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref 来从 DOM 节点中获取表
阅读全文
摘要：props: 自己可以设置默认属性，也可以从外部传入属性，但是外部传入的属性，自己只能用，不能用来修改 state: 一般由自己控制，自己可以进行状态的更改。 state状态 类组件 一般书写： 状态一般放在constructor进行定义的 react中推荐采用setState，就可以实现数据改变，
阅读全文
摘要：两种ref的绑定形式 作用：可以标记组件，更快的找到对应位置。 通过ref就可以给元素作标记 ref="xxx" 这种方式在react官方中不推荐使用了，作为了解即可 官网上推荐了两种ref绑定形式 1.回调的形式<input ref = /> 举例:输入框焦点 class App extends
阅读全文
摘要：当需要遍历数组时，特别是需要遍历多个数组时，我们就可以封装函数，从而提高代码的复用率，还要注意两点哦，1.数组的map可以进行遍历，需要加唯一的key值，2.封装成函数的话，记得内部需要加return关键字！ <div id="app"></div> //当为多个数组时。 var arr = ["a
阅读全文
摘要：react中定义组件的两种方式： 方式一：函数式组件 const 组件名（首字母大写） = (props) =>{ reture ( jsx表达式 ) } const App = ()=>{ return ( <div> <h2>我是h2</h2> </div> ) } //或者另一种写法 func
阅读全文
摘要：首先需要先安装：npm init -y 然后下载相应的：npm i react react-dom babel-standalone 新建js文件夹把上面下载的文件移动到js文件夹 (react/umd/react.development.js) (react-dom/umd/react-dom
阅读全文
