React

vue vs react
jsx ,Vnode,diff
单向数据流

相似点
都是为了解决数据响应的问题 减少我们的dom操作
通过数据驱动的方式 开发应用程序 包括虚拟dom diff算法

不同点：
vue中数据劫持的方式，数据动态化响应方式
vue2.0版本采用的 getter,setter,
react中 自己造了一个很强大的机制
通过标识去刷新页面，这时候重新调取渲染函数，生成虚拟dom 与之前的老dom作比较，从而在最后做最小的更新， 在架构上更大，更复杂

组件类型

CompType.js

/*
 * @Author: your name
 * @Date: 2020-04-24 13:50:14
 * @LastEditTime: 2020-04-26 07:43:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo\src\CompType.js
 */
import React,{Component} from 'react'
function Welcome1(){
    return <div>welcome1</div>
}
class Welcome2 extends Component{
    render(){
        return <div>Welcome2</div>
    }
}

 export default function CompType(){
     return (
         <div>
            <Welcome1/>
            <Welcome2/>
         </div>
     )
 }

app.js

/*
 * @Author: your name
 * @Date: 2020-04-09 08:21:50
 * @LastEditTime: 2020-04-26 07:44:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo\src\App.js
 */
import React from 'react';
import './App.css';
// import CompType from './CompType'
import CompType  from './CompType'
function App() {
  return (
    <div className="App">
    {/*组件类型*/}
      <CompType/>
    </div>
  );
}

export default App;

setState注意事项:
1.状态是封闭的，只有组件自己能访问和修改
2.批量执行，多key一次执行 相同key合并
3.可能是异步的，如果要获取最新状态值，三种方式
传递函数给setState
定时器
原生事件中

/*
 * @Author: your name
 * @Date: 2020-04-26 08:18:57
 * @LastEditTime: 2020-04-28 13:59:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo\src\StateTest.js
 */
import React,{Component} from 'react'
class Clock extends Component{
    /**
     * @description: super用于调用父类构造函数的部分
     * 其必须出现在构造函数的第一行。super在调用时第一件事就是去执行父类构造函数的部分
     * 所执行的父类构造函数与super()括号中的参数相对应
     * super调用父类构造函数， this调用自身类的构造函数。
     */    
    // constructor(props) {
        
    //     super(props)
    //     this.state = {
    //         date: new Date()
    //     }
    // }
    // 简写
    state = {date:new Date(),counter:1}
    componentDidMount(){
        this.timer=setInterval(()=>{
            // setState修改状态
            this.setState({date:new Date()})
        },1000)
        //批量操作：对同一个key多次操作 会执行最后一次
        this.setState({counter:this.state.counter+1})
        this.setState({
            counter: this.state.counter + 1
        })
        this.setState({
            counter: this.state.counter + 1
        })
        this.setState({
            counter: this.state.counter + 1
        })
        // console.log(this.state.counter)//1 生命周期内多次操作有可能是异步的
        this.setState((pre)=>{
            console.log(pre.counter)
        })
        setTimeout(()=>{
            console.log(this.state.counter)
        },0)
        document.body.addEventListener("click", this.changeCounter)
    }
    changeCounter = () => {
        this.setState({
            counter: this.state.counter + 1
        })
        console.log(this.state.counter)
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render(){
        return <div>{this.state.date.toLocaleTimeString()}
                    <p>{this.state.counter}</p>
                </div>
    }
}
export default class StateTest extends Component{
    render(){
        return(
            <div>
                <Clock/>
            </div>
        )
    }
}

/*
 * @Author: your name
 * @Date: 2020-04-09 08:21:50
 * @LastEditTime: 2020-04-26 08:30:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demo\src\App.js
 */
import React from 'react';
import './App.css';
// import CompType from './CompType'
// import CompType  from './CompType'
import StateTest from './StateTest'
function App() {
  return (
    <div className="App">
    {
      /*组件类型 <CompType/>*/ }
       <StateTest></StateTest>
    </div>
  );
}

export default App;

									

作者：yang

原文地址：https://segmentfault.com/a/1190000022469523

喜欢 0