weixin_44428467的博客

<div className="row"> <div className="col-xs-2 col-xs-offset-2"> <div className="list-group"> {/* 原生html中，靠<a>跳转不同的页面 */} {/* <a className="list-group-item" href="./about.html">About</a>

消息订阅与发布机制：PubSub。不仅适用于兄弟间的通信，而且适用于任意组件的通信。search = ()=>{ //获取用户的输入(连续解构赋值+重命名) const {keyWordElement:{value:keyWord}} = this //发送请求前通知List更新状态 PubSub.publish('atguigu',{isFirst:false,isLoading:true}) //发送网络请求 axios.get(`/api1/search/users?

# react脚手架配置代理总结## 方法一> 在package.json中追加如下配置```json"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupPr

react和axios组合使用：四种发送http请求的方法：ajax，jQuery，fetch，axios.ajax:不需要刷新界面，更新数据，允许根据用户事件来更新界面。缺点：存在跨域问题。请求报文响应报文ajax进行GET请求：btn.onclick=function(){ //1创建对象 const xhr = new XMLHttpRequest(); //初始化，设置请求的方法和url，设置url参数 xhr.open('GET','htt

父组件向子组件传递数据，通过props子组件向父组件传递数据： 父组件利用props向子组件传递一个函数，子组件接收函数，通过调用函数向父组件传递数据。APP组件，Header LIst Footer是他的子组件addTodo = (todoObj)=>{ //获取原todos const {todos} = this.state //追加一个todo const newTodos = [todoObj,...todos] //更新状态 this.setState({to

在某一时间节点调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。开发者可以通过设置 key 属性，来告知渲染哪些子元素在不同的渲染下可以保存不变。diffing算法;1.React中key有什么作用，内部原理是什么，为什么遍历列表时，key最好不使用index？1. 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着

旧的生命周期1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件render触发 1. shouldComponentUpd

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。使用函数柯里化实现： class Login extends React.Component{ //

(1).通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效(2).通过event.target得到发生事件的DOM元素对象 （发生事件的元素是要操作得元素）——————————不要过度使用ref受控组件：表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutab

1.string类型的ref已经过时了2.使用回调形式的refclass Demo extends React.Component{ render(){ return( <div> <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder="

展开运算符 复习：<script type="text/javascript" > let arr1 = [1,3,5,7,9] let arr2 = [2,4,6,8,10] console.log(...arr1); //展开一个数组 let arr3 = [...arr1,...arr2]//连接数组 //在函数中使用 function sum(...numbers){ return numbers.reduce((preValue,c

JSX语法规则跟标签只有一个标签必须闭合内联样式style={{}}类名：className。标签中混入js表达式时，使用{}标签首字母（1）小写转换为html中的同名标签，若没有，则报错（2）若为大写，react就去渲染对应的组件。若组件没有定义，就报错。函数式组件： function MyComment(){ return <h2> 这是用函数式声明定义的组件</h2> } ReactDOM.render(<MyComm

next.js使用本地图片，需要放在public的文件夹下，并且路径直接以‘/’开头。例如图片放在public文件夹写的imgs的文件夹中，则使用网络图片则直接是src直接写的是网络路径。

一、前置知识1.1 区别实例对象与函数对象实例对象：new 函数产生的对象, 称为实例对象, 简称为对象。函数对象： 将函数作为对象使用时, 简称为函数对象function Fn() {}const fn = new Fn() // fn为实例对象Fn.bind({}) // Fn为函数对象1.2 两种类型的回调函数同步回调理解：立即执行, 完全执行完了才结束, 不会放入回调队列中例子: 数组遍历相关的回调函数 / Promise 的 excutor 函数异步回调理解：不会立即执行