react

在HTML中的react
函数化编程
声明式
纯函数
柯里化函数
事件
子传父
路由
组件
函数组件：
类组件
hook
在HTML中的react

函数化编程
声明式
ES5

map

fliter

forEach:没有返回值

纯函数
不改变原数组

arr.slice()

arr.

柯里化函数
$ cnpm install react react-dom -S

只允许有一个子元素

jsx语法

vue:构造函数

react:对象

组件

main.js

遍历:

key值得作用？？

constructor:必须要super,否则this指向会出错

定义当前组件的状态

this.state={}

this.setState()用来修改this.state中的数据

对象/函数返回一个对象
回调：验证数据是否修改成功/
render()

函数中写逻辑

this.setState()是异步渲染数据，不同通过循环的方式，使state中的值多次显示，this.setState({name:item}),如要这样，可将对象换为函数

如果有了异步，那么每次的改变都会被渲染，

事件
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);

}
//方法
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
//对象
handleClick() {
this.setState({
isToggleOn: !this.state.isToggleOn
});
}
render() {
return (

{this.state.isToggleOn ? ‘ON’ : ‘OFF’}

);
}
}

ReactDOM.render(
,
document.getElementById(‘root’)
);
context:

let aa=React.createContent()

子传父
给父组件中的子组件绑定一个自定义的属性，值为需要接收参数的函数

路由
$npm install react-router-dom:做Web

react-router-native:做APP

vue:命名路由，命名视图

高阶组件

传值给了高阶组件

import React ,{Component} from “”

import Person from “”
class App
jj

import React from “”

import Person from “”

export default (WrapperCompent)=>{
//不需名字
return class extends React.Component{
render (){
return(

            </div>
        )
    }
}

}
//Fragment容器组件，内置组件，不会被渲染到页面
import React,{Fragment} from “react”

jj

反向继续/集成

import React from “”

export default (WraComprnt)=>{
return class extends React.Compient{
return (
)
}
}
组件
函数组件：
只能做渲染数据

类组件
hook
16.8版本新增的

useState

useEffect

是一个函数，里面有一个回调函数，在DidMount 后执行，

DidUpdate，在组件数据改变时执行

[]

effect:影响