React基本知识

一、React特点
（1）声明式设计：React采用声明范式，可以轻松描述应用，声明式是告诉计算机要去做什么而不管怎么做，而命令式是描述如何去做。
（2）高效：通过对Dom的模拟（虚拟dom），最大限度的减少与DOM的交互
（3）灵活：可以与已知的库或框架很好的配合
（4）JSX：是javascript语法的扩展
（5）组件：通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
（6）单向响应的数据流：这也是为什么比传统数据绑定更简单
注意：
vue:双向响应数据流用template
React：单向响应的数据流
二、函数化编程
1、柯里化函数

实现一个函数add(3)(5)结果等于8 add(1)(2)(3)(4)结果为10

    function fn(a){
        return function(b){
            return a+b;
        }
    }


     function fn(a){
        return function(b){
           return function(c){
               return a+b+c;
           }
        }
    }

2、什么是一个纯函数

输入一定输出也一定

3、声明式和命令式

    var arr = [10,20,30,40];

    for(var i=0;i<arr.length;i++){
        arr[i]+=10;
    }
//声明式
    arr.map(item=>item+10);

React必须安装的依赖

cnpm install react react-dom -S
三、在搭建的webpackproject上练习组件
（1）public->index.html

<div id="root"></div>

（2）.babelrc文件中，原来的基础上加 ["@babel/preset-react"]

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions"
                    ]
                }
            }
        ],
        ["@babel/preset-react"]
    ]
}

(3)在main.js中引入React

import React from "react";
import ReactDOM from "react-dom";

let url="http://www.baidu.com";
let imgUrl="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png";

//注意只用一个花括号
let dom=<div>
    <a href={url}>百度</a>
    <img src={imgUrl} className="abc"/>
    <label htmlFor="box">用户名</label>
    <input type="text" id="box"/>
</div>

ReactDOM.render(
    dom,
    document.getElementById("root"),
    ()=>{
        console.log("渲染成功")
    }
)
/*
ReactDOM.render()
    参数1：需要渲染的DOM元素或者组件
    参数2：挂载点
    参数3: 回调

*/

四、模拟 v-text、 v-html、 v-show、 v-if、 v-else、 v-bind、 v-on、 v-model、 v-for
（1） v-text

let message = "Alley"
let demo = <h2>{message}</h2>

（2）v-html

let message = <h2>Alley</h2>
let demo = <div>{message}</div>

（3） v-show
v-if
v-else

let flag = false
let demo = <div>
   {flag? <h2>111</h2>: <h2>222</h2>}
    <h2 style={{display:flag?'block':'none'}}>333</h2>
    <h2 style={{display:!flag?'block':'none'}}>444</h2>
</div>

（4）v-bind

let url = "http://www.baidu.com";
let imgUrl = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png";

let dom = <div>
    <a href={url}>百度</a>
    <img src={imgUrl}/>
</div>

（5） v-on
（6） v-model
（7） v-for

在react中不能在通过class来编写类名，只能通过className来进行编写
以及form表单中的for也不能在进行使用 而是改成htmlFor

五、ReactDOM.render()
参数1：需要渲染的DOM元素或者组件
参数2：挂载点
参数3: 回调
六、React中如何创建组件
React中通过class关键字来创建组件,React这个对象身上有一个属性Component这个Component是所有
组件的父类，如果我们想要创建组件的时候必须通过继承这个父类来创建组件

组件创建时需要注意的地方
1、组件名称必须大写
2、组件中必须有render函数，这个render函数必须返回一个JSX语法。注意的地方是只能有一个元素

render
是一个生命周期函数，render函数的作用是用来渲染jsx语法。以及虚拟DOM的对比。render函数会多次执行
只要this.state/this.props发生改不了它就会执行

react中事件的优化
1、如果在不需要传递参数的情况下，我可以将函数在constructor中提前定义，以及提前改变this指向

            constructor(){
                super();

            this.handleClick = this.handleClick.bind(this)

            }
            render(){
                return (
                    <div>
                        {
                        arr.map((item,index)=>(
                            <p key={index} onClick={this.handleClick}>{item}</p>
                        ))  
                        }
                    </div>
                )
            }

App.js中

import React from "react";
var arr=[10,20,30,40]

//创建组件的方式
class App extends React.Component{
    constructor(){
        super();
        this.handleClick=this.handleClick.bind(this)
    }
    render(){
        return(
            <div>
                {
                    arr.map((item,index)=>(
                    <p key={index} onClick={this.handleClick}>{item}</p>
                    ))
                }
            </div>
        )
    }
    handleClick(){
        console.log(this);//如果construct中没有this.handleClick=this.handleClick.bind(this)，会输出undefined
    }
}
export default App;

constructor:
也是组件中的一个生命周期，如果创建组价的时候写了constructor那么就必须要书写super，
如果不写super的情况下this的指向会发生问题

    存放当前组件所需要的一些状态

    this.state = {}  状态


this.setState:
    作用是用来修改this.state中的数据，当this.setState调用了以后render函数就会重新执行。

    基本语法：
            this.setState({
                message:xxx
            })

    第二种写法
                this.setState((state)=>{
                    return {
                        message:"XXXX"
                    }
                })



    this.setState是一个异步
	this.setState的第一个参数可以是一个对象，也可以是一个函数返回一个对象，函数的参数是上一次的state
    this.setState中的第二个参数是一个回调
        作用:
            1、验证数据是否修改成功
            2、获取数据更新后最新的DOM结构
  this.setState({
        message: 1000
    },()=>{
        console.log(this.state.message);
        console.log(document.getElementById("h2").innerText)
    })
组件分类    
    1、类组件
    2、函数组件
    3、受控组件
    4、非受控组件
    5、高阶组件
    6、UI组件
    7、容器组件
    .....
    **注意：通过export方式导出，在导入时要加{ }，export default则不需要**

组件状态的定义和修改

App.js中

import React from "react";


//创建组件的方式
class App extends React.Component {
    constructor() {
        super();
        //存放组件所需的一些状态
        this.state = {
            message: "1918",
            n: 0
        }
        this.handleClick=this.handleClick.bind(this);
    }
    render() {
        return (
            <div>
                <h2 id="h2">{this.state.message}</h2>
                <h2>{this.state.n}</h2>
                <button onClick={this.handleClick}>点击</button>
            </div>
        )
    }
    handleClick(){
        // this.setState({
        //     message:1000
        // },()=>{
        //     console.log(this.state.message);//输出1000
        //     console.log(document.getElementById("h2").innerText)
        // })

        this.setState((state)=>{
            return{
                message:"xxx"
            }
        })
    }
}
export default App;

super（）的作用
而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象，没有 this 对象而要对 this 进行处理，能不报错吗？