react封装函数_React-类组件与函数组件

组件与元素？

//React元素

const div=React.createElement('div',……)

//React组件

const Div=()=>React.createElement('div',……)

元素返回值是一个对象；组件返回值是函数

React的两种组件：函数组件、类组件

//函数组件

function Welcom(props){

return

Hello,{props.name}

}

//使用函数组件

//类组件

class Welcome extends React.Component{

render(){

return

Hello,{this.props.name}

}

}

//使用类组件

组件会被翻译成什么？

翻译成React.createElement(Welcome)，翻译成类组件或者函数组件

查看语句被翻译成什么，可以查看网址：Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器​www.babeljs.cn

React.createElement的详细讲解？如果传入一个字符串"div"，则会创建一个div

如果传入函数，则会调用该函数，获取其返回值

如果传入一个类，则会在类的前面加一个new(这会导致执行constructor函数，一般用于初始化state(内部数据))，获取一个组件对象，然后调用对象的render方法，获取其返回值

在类组件里面，如何初始化内部数据(state)?

class Welcome extends React.Compoent{

constructor(){

super()

this.state={n:0}

}

//下面是渲染

render(){

return

你大爷

}

}

如果遇到：'react-scripts' 不是内部或外部命令，也不是可运行的程序 或批处理文件，怎么办？

解决方案：yarn install外部数据——props

内部数据——state

如何使用外部数据props？

function App(){

return(

爸爸

//导出外部数据的属性

)

}

//class组件

class Son extends React.Component{

render(){

return(

//引入外部数据

{this.props.messageForSon}

)

}

}

//函数组件

const Grandson=(x)=>{

return(

//引入外部数据

{x.messageForGrandson}

)

}

导出外部数据的属性，右面是字符串，就用引号包起来；右面是变量，就用花括号包起来。

使用内部数据(类组件)：

class Son extends React.Component{

constructor(){

super()

//初始化n

this.state={n:0}

}

add(){

//改写n

this.setState({n:this.state.n+1})

}

render(){

return(

//读n

儿子 n:{this.state.n}

)

}

}

牛x的前端写state时，一般后面写一个函数。如：

add(){

this.setState((state)=>{

return {n:state.n+1}

})

}

括号里面旧的state，结果是产生一个新的state，React的原则之一是数据不可变的原则。

使用内部数据(函数组件)：

const Grandson=()=>{

//使用useState，第一个数是用来读的，第二个数是用来写的，这一步就是初始化

const [n,setN] = React.useState(0)

return(

//读n

读取n:{n}

//改写n

{setN(n+1)}}>+1

)

}

注意

this.state.n+=1为什么无效？

其实n已经改变，只不过UI没有自动更新，调用setState才会触发UI更新。因为React没有像Vue监听data一样，监听state。

setState是异步更新的

setState之后,state不会马上改变，如果立马读取state值会读到旧的值。推荐的方式用：setState(函数)。

this.setState(this.state)为什么不推荐？

不可变数据，React希望我们不要修改旧的state。常用代码是：

setState({n:state.n+1})

函数组件和class组件在读写数据的区别？

函数组件没有this，class组件有。

Vue和React的编程模型？Vue：一个对象对应一个虚拟DOM，当对象的属性改变时，把属性相关的DOM节点全部更新。

React：一个对象对应一个虚拟DOM，另一个对象对应另一个虚拟DOM，对比两个虚拟DOM找不同，最后局部更新DOM。

class组件里面如果只更新一部分数据，没更新的数据会自动的沿用上一次的值，而不会被undefined覆盖。如下代码：

setState({...state,n:state.n+1})

前面的...state可写可不写，如果在被数据覆盖的情况下，这样写，...含义是把之前的数据手动复制过来。

类组件的setState会自动合并第一层属性，但是不会自动合并第二层属性，怎么办？

使用Object.assign或者...操作符。函数组件完全不会帮助合并，既不会合并第一层，也不会合并后第二层。

事件绑定

onClick、onKeyPress

类组件的事件绑定：

//写法一

this.addN()}>+1

//写法二:缺点是this会变成window

+1

//写法三：缺点是太麻烦

+1

//最终写法

addN=()=>this.setState({n:this.state.n+1})

this.addN()}>n+1

this

复习文章方应杭：this 的值到底是什么？一次说清楚​zhuanlan.zhihu.com方应杭：你怎么还没搞懂 this？​zhuanlan.zhihu.com方应杭：JS 里为什么会有 this​zhuanlan.zhihu.com

面试题一

var a={

name:"里面的name",

sayName:function(){

console.log("this.name="+this.name)

}

}

var name="外面的name"

function sayName(){

var sss=a.sayName;

sss();//this.name=???

a.sayName();//this.name=???

(a.sayName)();//this.name=???

(b=a.sayName)();//this.name=???

}

sayName()

this面试题二

var length=10

function fn(){

console.log(this.length)

}

var obj={

length:5,

method:function(fn){

//fn.call(undefined)

fn()

//arguments[0].call(arguments)

arguments[0]();

}

}

//obj.method.call(obj,fn,1)

obj.method(fn,1);//输出什么

Vue和React异同点

相同点

都是对视图的封装，React是用类和函数表示一个组件，而Vue是通过构造选项构造一个组件。都提供了createElement的XML简写，React提供的是JSX语法，Vue提供的是模板写法

不同点

React把HTML写在JS里面，而Vue把JS放在HTML里面