React要点入门进修总结

2024年5月9日 114次阅读来源: lgybetter

一.JSX简介

JSX即JavaScript XML,一种在React组件内部构建标签的类XML语法。
在不运用JSX的状况下，React顺序中建立DOM是如许的：

//v0.11
React.DOM.h1({className: 'title'}, 'Title');
//v0.12
React.createElement('h1', {className: 'title'}, 'Title');

假如运用JSX的体式格局建立节点为：

<h1 className="title">Title</h1>

JSX的特征：

JSX是一种句法变更，每一个JSX节点都对应着一个JavaScript函数
JSX即不供应也不须要运行时库
JSX并没有转变或许增加JavaScript的语义，它只是简朴的函数挪用。

代码一

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello,react!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

要点一：在全部Html文件中，只要定义了一个id为example的div标签，当顺序运行时，JavaScript代码实行，
React会建立新的DOM节点，也就是<h1>Hello,react!</h1>。
ReactDOM.render(newDom,parentDom);这个函数是用来对视图举行衬着新的节点，函数的参数重要有两个，
一个是新的节点，另一个是新节点要放在哪一个父节点中。

要点二：<script> 标签的 type 属性为 “text/babel” 。这是因为 React 独占的 JSX 语法，跟
JavaScript 不兼容。通常运用 JSX 的处所，都要加上 type=”text/babel”

要点三：ReactDOM.render()要领中的第一个参数，也就是新的节点，只能有一个顶层的标签，然后内里嵌套多个子节点，
比方下面的写法就是不可行的：

//Error
ReactDOM.render(
  <p>Error</P>
  <h1>Hello,react!</h1>,
  document.getElementById('example')
);

二.动态数值

代码二

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      var names = ['lgy','Kb'];
      ReactDOM.render(
        <div>
        {
          names.map((name) => {
            return <div>Hello,{name} !</div>
          })
        }
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

要点：经由过程在JavaScript中定义变量，可嵌入JSX中运用动态变量，运用的语法为：<div>Hello,{name} !</div>

代码三

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      var arr = [
        <h1>Hello react</h1>,
        <h2>Hello Node</h2>
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

要点：能够经由过程传入节点数组的体式格局，直接把数组赋予新的节点，<div>{arr}</div>，JSX语法会依据数组的元素动态天生对应的子节点

三.组件组织运用

React的组件化形式是最大的亮点，组件中运用props或许state，当这两个变量转变时，响应的DOM表现也会有所转变，这重要原因是一个
组件是一个状况机，关于特定的输入，他总会返回一致的输出。

代码四

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      console.log(React);
      class HelloMessage extends React.Component{
        render() {
          return <h1>Hello {this.props.name}</h1>;
        }
      }
      ReactDOM.render(
        <HelloMessage name="LGY" />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

要点一：组织一个组件的语法运用ES6的规范举行，经由过程继续React.Component,运用render() {…}举行衬着对应的标签和变量输出组件

要点二：定名新组织的组件的第一个字母须要大写！！！

要点三：运用组织好的组件，经由过程运用标签<HelloMessage name=”LGY”/>，个中name是通报进去的参数，在内部用this.props.name举行
挪用变量

四.组件的性命周期

(1)组件的三个性命周期状况：

1.Mounting:已插进去实在 DOM

2.Updating:正在被从新衬着

3.Unmounting:已移出实在 DOM

(2)组件性命周期要领：

1.componentWillMount():改要领在完成初次衬着之前被挪用。是在render要领挪用前能够修正组件state的末了一次时机

2.componentDidMount():当render要领胜利挪用后，且DOM已被衬着，能够在componentDidMount内部经由过程this.getDOMNode()要领接见到DOM节点

3.componentWillUpdate(object nextProps, object nextState):组件在收到新的props或许state举行衬着之前，这时候挪用该要领

4.componentDidUpdate(object prevProps, object prevState):这个要领能够让我们更新已衬着好的DOM的时机

5.componentWillUnmount():当组件的性命结束时，这个要领就会被挪用

(3)两种特别状况的处置惩罚函数

1.componentWillReceiveProps(object nextProps):已加载组件收到新的参数时挪用

2.shouldComponentUpdate(object nextProps, object nextState):组件推断是不是从新衬着时挪用

五.数据流

(1)Props:

经由过程props能够把恣意范例的数据通报给组件

var tables = [{title: 'React'}]
<TableList tables={tables} />

能够经由过程this.props.tables接见对应的属性，然相对不能修正。一个组件相对不能够本身修正本身的props!!!

(2)PropsTypes:

经由过程在组件中定义一个设置对象。组件初始化时，假如通报的属性和propsTypes不婚配，就会打印一个console.warn日记，
假如是可选的设置，就能够去掉isRequired。

代码五

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="example"></div>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    class MyTitle extends React.Component{
      render() {
        return <h1>{this.props.title}</h1>;
      }
    }
    MyTitle.propTypes = {
      title: React.PropTypes.string.isRequired
    }
    //设置默许属性
    MyTitle.defaultProps = {
      title: "lgy"
    }
    var data = 'KB';
    ReactDOM.render(
      <MyTitle title={data}/>,
      document.getElementById('example')
    );
  </script>
</body>
</html>

要点: 示例中定义了一个组件MyTitle，个中运用propTyps对组件的属性范例举行婚配，defaultProps对组件的属性范例设置默许值。

代码六

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example"></div>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script type="text/babel">
      class NodeList extends React.Component{
        render() {
          return (
            <ol>
            {
              React.Children.map(this.props.children,(child) => {
                return <li>{child}</li>;
              })
            }
            </ol>
          );
        }
      }
      ReactDOM.render(
        <NodeList>
          <span>Hello!</span>
          <p>LGY</p>
        </NodeList>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

要点: 经由过程this.props.children来猎取组件的子节点

(3)State

每一个React组件都能够具有本身的state，state与props的区分在于前者只存在于组件的内部中，this.props
示意那些一旦定义，就不再转变的特征，而 this.state 是会跟着用户互动而发作变化的特征。state能够肯定
视图的状况。

代码七

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="example"></div>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        console.log(this);
        this.state = {liked: false};
      }
      handleClick(event) {
        console.log(this);
        this.setState({liked: !this.state.liked});
      };
      render() {
        var text = this.state.liked ? 'like' : 'haven\' t liked';
        return(
          <div>
            <input
              type="button" 
              value="Click to toggle." 
              onClick={this.handleClick.bind(this)}
            />
            <p>You {text} this.</p>
          </div>
        );
      }
    }
    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    );
  </script>
</body>
</html>

要点：组件LikeButton经由过程constructor组织函数举行初始化状况，this.state = {liked: false} 把liked的状况设置为false,
然后经由过程handleClick绑定this,当用户点击按钮时，转变liked变量的状况，这时候视图也会跟着一同转变。

六.DOM操纵

组件并非实在的 DOM 节点，而是存在于内存当中的一种数据结构，叫做假造 DOM （virtual DOM）。只要当它
插进去文档今后，才会变成实在的 DOM 。依据 React 的设想，一切的 DOM 更改，都先在假造 DOM 上发作，然后
再将现实发作更改的部份，反映在实在 DOM上，这类算法叫做 DOM diff ，它能够极大进步网页的机能表现。

代码八

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="example"></div>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    var MyComponent = React.createClass({
    handleClick: function() {
      if (this.myTextInput !== null) {
        this.refs.myText.focus();
      }
    },
  render: function() {
      return (
        <div>
          <input type="text" ref="myText" />
          <input
            type="button"
            value="Focus the text input"
            onClick={this.handleClick}
          />
        </div>
      );
    }
  });
  ReactDOM.render(
    <MyComponent />,
    document.getElementById('example')
  );
  </script>
</body>
</html>

要点：组件 MyComponent 的子节点有一个文本输入框，用于猎取用户的输入。这时候就必需猎取实在的 DOM 节点，假造 DOM 是拿不到用户
输入的。为了做到这一点，文本输入框必需有一个 ref 属性，然后 this.refs.[refName] 就会返回这个实在的 DOM 节点。须要注重的
是，因为 this.refs.[refName] 属性猎取的是实在 DOM ，所以必需比及假造 DOM 插进去文档今后，才运用这个属性，不然会报错。上
面代码中，经由过程为组件指定 Click 事宜的回调函数，确保了只要比及实在 DOM 发作 Click 事宜以后，才会读取 this.refs.[refName]
属性。

七.表单

代码九

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="example"></div>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    class Input extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value:'Hello!'}
      }
      handleChange(event) {
        this.setState({value:event.target.value});
      }
      render() {
        var value = this.state.value;
        return (
          <div>
            <input type="text" value={value} onChange={this.handleChange.bind(this)}/>
            <p>{value}</p>
          </div>
        );
      }
    }
    ReactDOM.render(
      <Input/>,
      document.getElementById("example")
    );
  </script>
</body>
</html>

要点：文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事宜的回调函数，经由过程
event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这类状况

八.收集要求

代码十

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="example"></div>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script type="text/babel">
    function get(source,callback) {
      var request = new Request(source);
      fetch(request)
      .then(res => res.json())
      .then(arr => callback(arr[0])) 
    }
    class UserGist extends React.Component {
      constructor(props) {
        super(props);
        this.state = {username: '',lastGistUrl: ''};
      }
      componentDidMount() {
        var usr = get(this.props.source,(usr) => {
          this.setState({
            username: usr.owner.login,
            lastGistUrl: usr.html_url
          });
        });
      }
    render() {
      var value = this.state.value;
      return (
        <div>
          {this.state.username}'s last gist is
          <a href={this.state.lastGistUrl}>here</a>.
        </div>
      );
    } 
  }
  ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />,
    document.getElementById("example")
  );
  </script>
</body>
</html>

要点：该实例代码运用了Fetch API来举行数据猎取，Fetch API的详细怎样运用在接下来的博客文章会引见。

github堆栈链接：https://github.com/lgybetter/ReactDemo

    原文作者：lgybetter
    原文地址: https://segmentfault.com/a/1190000007184756
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。