react学习--- 初识别react

Posted 2020-10-07 RunningAndRunning

React是Facebook推出的一个javascript库

一、react三大特性

1、组件

基于react的项目一切都基于组件，各个组件有各自的状态，状态变更时，会自动重新渲染组件。组件特性也是Web前端发展的趋势。

一个Hello.jsx组件

// Hello.jsx
import React from ‘react‘;
export default Class Helloextends React.Component {
    render() {
        return (
          <div  className="Hello-component">
            <h2>Hi, I am {this.props.name}</h2>
          </div>
        )
    }
}

其他组件中，可以像html标签一样引用它：

import Hello from ‘./hello‘;

export default function(props) {
    return (
      <Hello name="world"/>
    )
}

 

2、jsx

上面的render方法中，有一种直接把HTML嵌套在JS中的写法，被称作JSX。这种语法结合了JavaScript和HTML的优点，即可以像平常一样使用HTML，也可以在里面嵌套JavaScript语法，运行时，Babel等工具会将JSX编译成JavaScript语法。

3、virtual DOM

React的设计中，开发者基本上无需操纵实际的DOM节点，每个React组件都是用Virtual DOM渲染的，可以看成是一种用JavaScript实现的内存DOM抽象。React在Virtual DOM上实现了一个Diff算法，渲染组件时，会高效的找出变更的节点，刷新到实际DOM上。

二、组件的prop和state

prop：组件对外的接口（使用组件的时候需要传入的数据父组件到子组件之间的通信）子组件通过this.props.name使用

state：组件内部状态 

react是单项数据流，那么子组件到父组件之间是如何通信的呢？通过callback

同级组件之间是如何通信的呢？

同级组件之间的通信还是需要通过父组件作为中介，或者使用redux或flux