react01

react特点：

　　1、声明式

　　　　命名式：当想要做什么事时需要告诉计算机你要干什么，怎么做

　　　　声明式：当想要做什么事时只需告诉计算机你想干什么，不用管怎么做的

　　　　* 大部分ES5的方法都是声明式，例如forEach、map等，只需要会用，不用管内部怎么实现的

　　2、组件：灵活、复用

　　3、虚拟DOM：提高性能

　　4、完整的全家桶

　　　　vue：vue+vue-router+vuex+vue-touch+elementUI。。。

　　　　react：react+react-dom+react-router+redux+react-redux+antd。。。

　　5、单向数据流

　　　　vue：Object.defineProperty() 双向响应式数据流

　　　　react：redux（观察者模式） 单向响应数据流

　　6、函数式编程

　　　　概念：函数式编程是一种思想

　　　　特点：

　　　　　　①声明式

　　　　　　②纯函数：输入一定输出也一定，不改变原数据的方法一般都是纯函数，map()是纯函数，forEach()不是纯函数

　　　　　　③柯里化函数（react高阶组件）：将多个参数的函数转化成一个参数的函数。面试题：实现一个函数add(2)(3)(5)的结果为10

  function add(a){
    return function(b){
      return function(c){
        return a+b+c
      }
    }
  }

  let add=a=>b=>c=>a+b+c

　　　　　　④反柯里化函数

　　7、jsx语法

　　　　vue：template语法

　　　　react：jsx语法（允许在js中写html代码）  ps：因为要写jsx语法，但是浏览器不支持jsx语法，需要下载 @babel/preset-react 插件

　　8、react和vue的区别

　　　　react的灵活度比vue高，vue的上手速度较快

　　　　react是单向响应式数据流，vue是双向响应式数据流

　　　　react用的是jsx语法，vue用的是template语法

　　9、面试题

　　　　react中的性能优化

　　　　react中如何做数据的更改

　　　　this.setState()的理解

　　　　this.setState()中第二个参数的作用

　　　　this.setState()是同步的还是异步的，什么时候是同步的，什么时候是异步的，为什么是异步的

下载插件和启动：

　　下载插件：

npm i @babel/preset-react webpack-dev-server -D

npm i react react-dom
react是react的核心语法，react-dom是用来解析jsx的语法

　　启动：在原来的webpack搭的架子里执行npm run dev，localhost:9001打开页面

ReactDOM的参数：

ReactDOM.render(<App />, document.getElementById('root'), () => {
  console.log('启动react')
})

　　参数一：需要渲染的节点或组件

　　参数二：将渲染好的DOM节点放到哪个根节点上

　　参数三：成功的回调

jsx语法需要注意的地方：

　　class必须要写成className，因为class是关键字

　　<label htmlFor='username'></label>    label中的for要写成htmlFor，for是循环的关键字

react中组件的创建：

　　1、组件的名称必须要大写（App），为了区分组件和标签

　　2、通过ES6的继承实现组件的创建，继承与React.Component

　　3、组件内部必须要有一个render函数，render函数中必须返回一个jsx语法（jsx中只能有一个根节点，可以写成<></>或<Fragment></Fragment>都不会渲染成dom）

　　4、组件中constructor是选填的，constructor用来做组件的初始化；存放组件需要的一些状态，如果需要存放必须要写在constructor中的this.state中；如果写了constructor必须要写super()，不写的话this指向不正确

import React, { Fragment } from 'react' // Fragment：react内置组件，用来做容器盒子，不会被渲染到页面上
class App extends React.Component {
  // constructor是用来做组件的初始化
  constructor() {
    super() // constructor中必须要写super()，不写的话this指向会发生错误
    this.state = {
      name: '小华'
    }
  }
  render() {
    let { name } = this.state
    return (
      <div className="app">
        <h1>App</h1>
      </div>
    )
  }
}

export default App

react中的事件：

　　语法：给元素添加 on事件名 （事件首字母必须要大写，原生中可以小写也可以大写）= {事件函数}

　　第一种：（需要传参）

        <h2 onClick={this.handleClick.bind(this,'wxm')}></h2>

　　第二种：（不需要传参）

        constructor(){
          super()
          this.handleClick=this.handleClick.bind(this) // 初始化
        }
        <h2 onClick={this.handleClick}></h2>

　　第三种：（少见，ui层和逻辑层未分离）

        <h2 onClick={()=>{console.log('xxxxxxxxxx')}}></h2>

　　注意事项：

　　　　1、react中的事件函数不要加()，加了就是自动执行的意思

　　　　2、react中的事件函数默认情况下this的指向是undefined，如果需要将this指向为当前组件需要通过bind绑定

　　　　3、因为render函数会多次执行，因此bind绑定的时候可以放在constructor中。当需要传参时在render函数内部的事件中bind，不需要传参可以在constructor中进行bind（this.handleClick=this.handleClick.bind(this)）

this.setState()：

　　语法：

　　　　第一种：

          this.setState({
            key:value
          },()=>{})

　　　　第二种：

          this.setState(()=>({
            key:value
          }),()=>{})

　　

　　1、在react中，如果需要修改state中的值，必须要通过this.setState()修改

　　2、this.setState()是异步的

　　3、this.setState()中的第二个参数是一个回调函数。作用：①验证数据是否修改成功②可以获取数据更新后最新的dom结构

　　4、只要this.setState()执行了那么render函数就会执行

组件传值：

　　父传子：

　　　　传递：给子组件标签上绑定一个自定义属性，值为需要传递的数据

        <One username={this.state.name}></One>

　　　　接收：在子组件render函数中通过props接收

        let { username } = this.props

　　子传父：

　　　　传递：在子组件中通过 this.props.事件函数 来进行传值

        <button onClick={this.handleAdd.bind(this)}>点击发送给父组件</button>


        handleAdd() {
          this.props.toApp('我是从two组件传来的')
        }

　　　　接收：在子组件标签上绑定一个自定义属性，值为需要接收参数的函数

        <Two toApp={this.handle2.bind(this)}></Two>


        handle2(value) {
          this.setState({
            towValue: value
          })
        }