合集-React学习记录
摘要：1.React起源与发展 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决 定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源 了。 2.React与传统MVC的关系 轻
阅读全文
摘要：1.全局安装create-react-app npm install -g create-react-app 2.创建一个React项目 create-react-app myapp 注意命名规范不能大写，中文等 如果不想全局安装，可以直接使用npx npx create-react-app mya
阅读全文
摘要：react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本，creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的 工程目录下的src目录情况，然后在里面重新创建一个index.js写入以下代码。 //从react的包当中引
阅读全文
摘要：1.JSX语法 JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码 更加直观并易于维护。 编译过程由Babel 的
阅读全文
摘要：ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承， ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码 import React from 'react' import ReactDOM from '
阅读全文
摘要：函数式组件即在React中通过函数的方式来声明一个组件 import React from "react" function App() { return ( <div> 函数式组件 <div>hhh</div> </div> ) } /* 16.8之前 //无状态 16.8之后 react hoo
阅读全文
摘要：一个项目肯定是由多个组件构成的，组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar
阅读全文
摘要：1.使用行内样式 想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现： // 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要
阅读全文
摘要：React采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写 onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。 事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法，然后在render里直接
阅读全文
摘要：用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 写法 import React, {
阅读全文
摘要：状态就是组件的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态 的目的就是为了在不同的状态下使组件的显示不同(自己管理) 定义状态的方法 可以在构造函数中定义也可以直接在类中通过变量的形式来定义 /* eslint-disable eqeqeq */ import React, { Co
阅读全文
摘要：在vue中我们一般是通过v-for指令来进行循环渲染的，但react中没有封装相关指令供我们调用 在react中我们可以通过数组的map方法来进行数据的循环渲染 import React, { Component } from 'react' export default class App ext
阅读全文
摘要：写一个todoList小案例来体验一下组件的状态以及状态维护的注意点 import React, { Component } from 'react' import './css/01-index.css' export default class App extends Component { s
阅读全文
摘要：1.使用场景 dangerouslySetInnerHTML指令能将字符串当做html解析 相当于vue中的v-html指令 一般我们用来渲染富文本返回的html文本 2.使用方法 {this.state.tolist.map((item,index)=>{ return ( <span dange
阅读全文
摘要：先说结论: setState处在同步的逻辑中会异步更新状态，更新真实dom。 连续调用 setState 不会连续进行虚拟dom的对比和页面的更新 setState处在异步的逻辑中，同步更新状态，更新真实dom。 1.同步状态 先看同步状态 /* eslint-disable react/no-di
阅读全文
摘要：1.属性的定义 props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更 改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流 2.属性的特点 属性是描述性质、特点的，组件自己不能随意更改，必须由父组件进行更改 3.
阅读全文
摘要：相似点： 都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同） 不同点： 1. 属性能从父组件获取，状态不能 2. 属性可以由父组件修改，状态不能 3. 属性能在内部设置默认值，状态也可以，设置方式不一样 4. 属性不在组件内部修改，状态要在组件内部修改 5. 属性能设
阅读全文
摘要：1.非受控组件的定义 非受控组件即状态不是完全由React的state来控制的组件 React要编写一个非受控组件，可以 使用 ref 来从 DOM 节点中获取表单数据，就是非受控组件。 import React, { Component } from 'react' export default
阅读全文
摘要：1.受控组件的定义 React组件的数据渲染是否被调用者传递的 props 完全控制，完全控制则为受控组件，否则非受控组件。即React 的 state 成为组件的唯一数据源。 下面用一个小案例来演示，案例中todolist组件的唯一数据源就是State，todolist组件就是一个受控组件 imp
阅读全文
摘要：在React中子组件给父组件传参通过回调函数来进行。 父组件给子组件传递一个回调函数作为属性。 子组件在需要传递参数的地方调用父组件传递的回调函数即可。 import React, { Component } from 'react' class Navbar extends Component {
阅读全文
