【React入门】React是什么

2 年 ago
科, 雅
2 minutes

首先

由于一个前端开发初学者目前参与了一个React项目，他将其在教程等学习中获得的知识整理如下。

React是一种JavaScript库。

React是用于构建用户界面(UI)的JavaScript库。
可以通过组合称为“组件”的独立小部件来构建UI。

React的使用示例

让我们来看一下使用React的示例应用程序。
以下是一个简单的计数器应用程序，它根据按钮的点击来增加或减少值。

请在CodePen上查看Amsel的计数器示例。

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    };
  }

  render(){
    return (
     <div>
       <div className="title">Counter</div>
       <button 
         className="minusButton"
         onClick={() => this.setState({count: this.state.count-1})}
       >
         -
       </button>
       <div className="counter">{this.state.count}</div>
       <button 
         className="plusButton"
         onClick={() => this.setState({count: this.state.count+1})}
        >
         +
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

反计算机组件

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count: 0,
    };
  }

  render(){
    return (
     <div>
       <div className="title">Counter</div>
       <button 
         className="minusButton"
         onClick={() => this.setState({count: this.state.count-1})}
       >
         -
       </button>
       <div className="counter">{this.state.count}</div>
       <button 
         className="plusButton"
         onClick={() => this.setState({count: this.state.count+1})}
        >
         +
        </button>
      </div>
    );
  }
}

上述代码中的Counter是一个React组件。
Counter组件接收一个名为props的参数，在构造函数中初始化值，并在render方法中返回一个描述视图的虚拟DOM。

Counter组件通过state对象来存储应用程序的状态，并在状态变化时使用差分重新渲染的机制。

通过这个状态管理机制，在上述的示例应用中，按下按钮的结果会立即被绘制到屏幕上。

组件调用

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

这段代码是组件的调用部分。
ReactDOM.render方法将Counter组件返回的虚拟DOM渲染到指定的DOM节点上。

JSX- JSX

上述的代码具有混合了 JavaScript 和 HTML 标签的独特外观，这是因为它是使用 JSX 编写的。

JSX是JavaScript XML的简写，是一种基于XML风格设计的JavaScript扩展语法。

JSX的优点

JSX只是扩展语法，用JSX编写的代码会通过Babel转换成JavaScript函数调用。

换句话说，React可以不使用JSX来编写。
如果不使用JSX来编写，就会变成以下这样。

function Welcome(props){
  return React.createElement(
    'h1',
    null,
    `Welcome ${props.name}`,
  );
}

ReactDOM.render(
  <Welcome name="Tom" />,
  document.getElementById('app')
);

使用JSX编写相同代码的结果如下。

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="Tom" />,
  document.getElementById('app')
);

通过使用JSX，可以将结构可视化为类似HTML的形式，从而提高可读性。

请看以下资料

React教程

bannerAds