React 实践记录 01 组件开发入门

时间 2019-11-09

标签 react 实践记录组件开发入门栏目 React 繁體版

原文原文链接

Introduction

本文组成：javascript

Ryan Clark文章Getting started with React的翻译。
博主的实践心得。

React由Facebook的程序员建立，是一个很是强大的javascript类库。
一个很大的卖点是virtual DOM机制，在DOM操做的性能上有较大的优点。
React社区经常介绍它为MVC架构中的“V”，虽然说如此，若是将React与Flux(之后将会介绍)结合，咱们就能够轻松实现M与V的同步。
在本文中，将会用到博主前两天介绍的webpack。如下是博文连接：
webpack 学习笔记 01 使用webpack的缘由
 webpack 学习笔记 02 快速入门html

Components

经过React，咱们能够专一于可复用的组件开发，好比：一个下拉导航栏组件，一个功能齐全的数据表格。React中，像CommonJs标准中同样，React的组件与组件也能良好隔离，能够随意的在组件内部增长功能。
全部的React组件都须要实现一个函数: render，咱们能够经过它，返回HTML或者调用其它的组件。正是这个基本的功能，给React带来了无限可能。java

JSX

若是你曾经看过React相关的信息，那可能会对一个名词印象比较深入：JSX。JSX使js无需""的包装，编写各种html tag。使得咱们能够更快速的开发React组件(考虑到多行问题，在js中写HTML本来仍是很麻烦的)。
咱们能够借助一个js库，在浏览器中将JSX转换为js，但这不是推荐的作法，本文介绍了如何经过webpack在本地实现JSX到js的转换，使得浏览器不用解决这一问题。node

Using JSX

render扮演着"ViewModel"的角色，在咱们返回HTML信息前，将Model注入View，并加入各种js逻辑。
如今，咱们新建一个目录，创建如下文件react

index.html
entry.js
webpack.config.jswebpack

借助npm与bower咱们能够快速下载依赖项程序员

npm init   
npm install babel-loader --save
bower install react   
bower init

如下是index.html的内容，借助webpack，咱们能够不用再修改它，就完成本示例了。web

<html>
    <head>
        <meta charset="utf-8">
        <title>react demo</title>  
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

如下是webpack配置内容npm

module.exports = {
  entry: "./entry.js",
  output:{
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
  loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }
  ]}
}

配置作好了，让咱们开始第一个JSX。浏览器

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({
  render:function(){
    return(
    <div>
      <h1>React with webpack</h1>
    </div>);
  }
});

React.render(<Widget />, document.body);

运行指令

webpack -w

能够看到以下结果：

Using variables for attributes

如前文所说，React组件里能够加入任意的js逻辑，咱们能够把刚才的JSX改为这样：

var Widget = React.createClass({
  render:function(){
    var text = "React with webpack";
    return(
    <div>
      <h1>{text}</h1>
    </div>);
  }
});

Basics of a component

组件能够维护本身做用域下的各种状态值。使咱们得以复用各种组件。
当咱们经过向组件的attributes传值时，他们会做为properties而引用。这句话可能很差理解，咱们看下代码：

var Widget = React.createClass({
  render:function(){
    var text = "";
    return(
    <div>
      <h1>{this.props.displayText}</h1>
    </div>);
  }
});

React.render(<Widget displayText="React with webpack"/>, document.body);

State

properties适合用在一次渲染，不须要改变的组件场景。在状态须要动态改变的场合，咱们会用到state。经过this.setState 函数以改变状态值，以后，组件会从新渲染(借助virtual DOM机制，这一部分仍是蛮快的)。如下是Demo

var Widget = React.createClass({
  getInitialState: function(){
    return{
      number: 0
    };
  },
  increment: function(){
    this.setState({
      number: this.state.number + 1
    });
  },
  render: function(){
    return(
    <div>
      <h1>{this.state.number}</h1>
      <button onClick={this.increment}>Inc</button>
    </div>);
  }
});

显示的数字将伴随按钮点击上升。

The component lifecycle

全部的组件都是有生命周期的，这无疑为咱们开发提供了很大的便利。好比刚才例子中的getInitialState，只会在控件装载(mount)后，调用一次。固然还有其它的生命周期函数：
componentWillMount在组件即将装载前调用，能够把Ajax放这。
componentDidMount在组件已经被渲染出了DOM后调用，这时，咱们能够借助this.getDOMNode取到跟节点，作一些后续工做。
componentWillUnmount组件被移除时，相关资源的清理工做，就得在这里(如移除EventHandler，若EventHandler操做了不存在的组件，error天然就被抛出)。

Component Methods

经过getDefaultProps，咱们能够为properties提供默认值，即当properties没有经过attributes传入，这些默认值会派上用场。

var Widget = React.createClass({
  getDefaultProps: function(){
    return{
      number: 10
    };
  },
  render: function(){
    return(
    <div>
      <h1>{this.props.number}</h1>
    </div>);
  }
});

React.render(<Widget/>, document.body);

React并不提倡提供过多的模版功能，它提倡的是回归原始，好比：当咱们须要用到repeater。咱们能够这样：

var Widget = React.createClass({
  render: function(){
    var data =[1,2,3,4]; //请假设这是有用数据
    var content = data.map(function(item){
      return (<h2>{item}</h2>)
    });
    return(
    <div>
      <h1>{content}</h1>
    </div>);
  }
});