React facebook团队开发

1.用来构建UI的 JavaScript库
2.React 不是一个 MVC 框架，仅仅是视图（V）层的库

特点

1 使用 JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2 性能高的让人称赞：通过 diff算法和虚拟DOM 实现视图的高效更新

React中的核心概念

1 虚拟DOM（Virtual DOM）
2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

JSX 的基本使用

JSX= js+html react 是js库
JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签

JSX - 使用react构造组件，babel（语法降级）编译——>转化js对象
ReactDOM.render()方法将dom，插入到root
3.JSX语法，最终会被编译为 createElement() 方法

JSX的注意点

只有一个根标签（虚拟dom对象需要一个根对象）
注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似：label 的 for属性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3：在 JSX 中只能使用表达式，但是不能出现语句！！！
注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}
注意：JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行

React组件

1.通过 JS函数创建（无状态组件）

function WelcomeUI(props){
  // props ---> { username: 'zs', age: 20 }
  return (
    <div>
      <div>Welcome React</div>
      <h3>姓名：{props.username}----年龄是：{props.age}</h3>
    </div>
  )
}
// 给 WelcomeUI组件 传递 props：username 和 age
ReactDOM.reander(<WelcomeUI username="zs" age={20}></WelcomeUI>, ......)

JavaScript函数创建注意:
注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
注意：2 函数必须有返回值，返回值可以是：JSX对象或null
注意：3 返回的JSX，必须有一个根元素
注意：4 组件的返回值使用()包裹，避免换行问题 return ()

2.通过 class 创建（有状态组件）

1 如果一个组件仅仅是为了展示数据，那么此时就可以使用函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

import React, {Component} from 'react';

class StateDemo extends Component {
  state = {
           name: 'react',
           now: new Date()
       };
/* 两种方式都可以
   constructor(props) {
       super(props);
       this.state = {
           name: 'react',
           now: new Date()
       };
   }
*/
   render() {
       return (
           <div>
               <h1>hello {this.state.name}</h1>
               <div>当前时间是： {this.state.now.toLocaleString()}</div>
               <button onClick={()=>{this.setState({now: new Date()})}} >刷新时间</button>
           </div>
       );
   }
}

props和state区别

1. props

给组件传递数据 - 父子组件传递数据
组件中有一个只读的对象 叫做 props，无法给props添加属性
获取方式：函数参数WelcomeUI(props)或者类自带属性props
作用：将传递给组件的属性转化为 props 对象中的属性
### 2.state状态即数据`
作用：用来给组件提供组件内部使用的数据
注意：只有通过class创建的组件才具有状态
注意：状态是私有的，完全由组件来控制
注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！

可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
注意：不要在 render() 方法中调用 setState() 方法来修改state的值

但是可以通过 this.state.name = 'rose' 方式设置state,但是不会更新render（）（不推荐!!!!）

修改 state 的值,render()会更新

  // 方式一：
  this.setState({
    count: this.state.count + 1
  })

  this.setState({
    count: this.state.count + 1
  }, function(){
    // 由于 setState() 是异步操作，所以，如果想立即获取修改后的state
    // 需要在回调函数中获取
    // https://doc.react-china.org/docs/react-component.html#setstate
  });

设置 state 只会为下一次渲染变更 state 的值
一个 state 变量的值永远不会在一次渲染的内部发生变化
更新state：
1.设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。
2.React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。
3.要在一个事件中多次更新某些 state，你可以使用 setNumber(n => n + 1) 更新函数。

二. 组件的生命周期

v2-c76edbbd7faf99ab9d470986ecc1411d_1440w.jpeg

函数的生命周期主要分为三个阶段 :挂载(已插入真实 DOM)、更新(正在被重新渲染)、卸载(已移出真实DOM) .

class LDemo extends Component {
    constructor() {
        super();
        console.log('======执行了构造方法');
        // 构造方法中直接给state赋初始值 不能执行setState
        this.state = {name:'react'}
    }

    componentWillMount() {
     '注意：无法获取页面中的DOM对象,还没被挂载'
     '注意：可以调用 setState() 方法来改变状态值，用途：请求获取数据'
        console.log('=======组件将要挂载，执行了componentWillMount')

    }

    componentDidMount() {
        console.log('======组件挂载到dom节点完成，执行了componentDidMount方法');
  `1 组件已经挂载到页面中
   2 可以进行DOM操作，比如：获取到组件内部的DOM对象
   3 可以发送请求获取数据
   4 可以通过 setState() 修改状态的值
   注意：在这里修改状态会重新渲染render()
`
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('=====执行了shouldComponentUpdate 组件在受到props或者state更新要判断是否执行render方法刷新视图， 返回false则不执行render');
        // 当state中name变为vue时，视图不更新
        if (nextState.name === 'vue') {
            return false;
        }
        return true;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('=====组件更新完成之后，执行了componentDidUpdate')
    }

    componentWillUnmount() {
        // 一般用于处理消除定时器、订阅
        console.log('======组件将要移除时，执行componentWillUnmount')
    }


    render() {
 `不要在render方法中调用 setState() 方法，否则会递归渲染
   原因说明：状态改变会重新调用render()，render()又重新改变状态`
    console.log('======执行了render方法');
     mytext = React.createRef() //关联dom
    render() {
        return (
            <div>
                <input type="text" ref={this.mytext} defaultValue="asdad" />
                <button onClick={
                    () => { console.log(this.mytext.current.value); }
                }>获取Value</button>
                <button onClick={() => {
                    this.mytext.current.value = ""
                }}>重置</button>
            </div >
        )
    }

}

事件绑定中的this

1 通过 bind 绑定
2 通过箭头函数绑定

// 自定义方法：
handleBtnClick(arg1, arg2) {
  this.setState({
    msg: '点击事件修改state的值' + arg1 + arg2
  })
}

render() {
  return (
    <div>
原理：bind能够调用函数，改变函数内部this的指向，并返回一个新函数
说明：bind第一个参数为返回函数中this的指向，后面的参数为传给返回函数的参数
      <button onClick={
        // 无参数
        // this.handleBtnClick.bind(this)
        // 有参数
        this.handleBtnClick.bind(this, 'abc', [1, 2])
      }>事件中this的处理</button>

##箭头函数中的this由所处的环境决定，自身不绑定this
   <input type="button" value="在构造函数中绑定this并传参"
     onClick={() => { this.handleBtnClick('参数1', '参数2')}
    } />

    </div>
  )
}

传递给事件处理函数的函数应直接传递函数名handleClick，而非调用 handleClick()

<button onClick={handleClick}> 正确 |
handleClick 函数作为 onClick 事件处理函数传递。这会让 React 记住它，并且只在用户点击按钮时调用你的函数。
<button onClick={handleClick()}>错误 |
handleClick() 中最后的 () 会在 [渲染] 过程中立即触发函数，即使没有任何点击。这是因为在 [JSX { 和 }]之间的 JavaScript 会立即执行。

组件通讯

父 -> 子：props
子 -> 父：父组件通过props传递回调函数给子组件，子组件调用函数将数据作为参数传递给父组件
兄弟组件：因为React是单向数据流，因此需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props

state
1.React 会等到事件处理函数中的所有代码都运行完毕再处理你的 state 更新。

react基础

react基础

React facebook团队开发

特点

React中的核心概念

JSX 的基本使用

JSX的注意点

React组件

1.通过 JS函数创建（无状态组件）

2.通过 class 创建（有状态组件）

props和state区别

1. props

修改 state 的值,render()会更新

二. 组件的生命周期

事件绑定中的this

传递给事件处理函数的函数应直接传递函数名handleClick，而非调用 handleClick()

组件通讯

推荐阅读更多精彩内容

react基础

React facebook团队开发

特点

React中的核心概念

JSX 的基本使用

JSX的注意点

React组件

1.通过 JS函数 创建（无状态组件）

2.通过 class 创建（有状态组件）

props和state区别

1. props

修改 state 的值,render()会更新

二. 组件的生命周期

事件绑定中的this

传递给事件处理函数的函数应直接传递函数名handleClick，而非调用 handleClick()

组件通讯

推荐阅读更多精彩内容

1.通过 JS函数创建（无状态组件）