【一起来烧脑】一步React.JS学会体系

比眉伴天荒 2021-09-30 00:24 252阅读 0赞

\[外链图片转存失败(img-cn4fbVDq-1563575047348)([https://upload-images.jianshu.io/upload\_images/11158618-8c6f3d2b8ff0bec3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-8c6f3d2b8ff0bec3.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

React.JS是用于构建用户界面的JavaScript库  
React.JS主要用于构建UI  
下载使用：[React.JS下载地址][React.JS]

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(   
           <h1>Hello, world!</h1>,
            document.getElementById('example')
          );    
         </script>
      </body>
    </html>

通过npm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org 
    
    $ npm config set registry https://registry.npm.taobao.org
    
    $ cnpm install [name]

使用create-react-app快速构建  
create-react-app 自动创建的项目是基于 Webpack + ES6

$ cnpm install -g create-react-app
    $ create-react-app my-app
    $ cd my-app/$ npm start

React.JS使用JSX来替代常规的JavaScript

使用JSX

JSX看起来类似HTML。

实例：

ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
    );

样式

React.JS 推荐使用内联样式

var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    ReactDOM.render(
        <h1 style = {myStyle}></h1>,
        document.getElementById('example')
    );

注释

注释需要写在\{\}中

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员

实例：

var arr = [
      <h1>123</h1>,
      <h2>welcome</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );

组件使应用更容易管理。

实例：

var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello World！</h1>; 
      }
    }); 
    ReactDOM.render(
      <HelloMessage />, 
      document.getElementById('example')
    );

如果需要向组件传递参数，可以使用this.props对象。

状态

class Clock extends React.Component {
      constructor(props) {
        super(props);    this.state = {date: new Date()};
    }
      
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        ); 
      }
    }
     ReactDOM.render(
      <Clock />,
      document.getElementById('example')
    );

React.JS Props

可以通过getDefaultProps()方法为props设置默认值。

React.JS API

设置状态–setState

替换状态–replaceState

设置属性–setProps

替换属性–replaceProps

强制更新–forceUpdate

获取DOM节点–findDOMNode

判断组件挂载状态–isMounted

组件生命周期状态

组件的生命周期可以分为三个状态：

mounting–已插入真实DOM

updating–正在被冲洗渲染

unmounting–已移出真实DOM

--------------------

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

\[外链图片转存失败(img-79UnLcN0-1563575047356)([https://upload-images.jianshu.io/upload\_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

[https_upload-images.jianshu.io_upload_images_11158618-8c6f3d2b8ff0bec3.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-8c6f3d2b8ff0bec3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[React.JS]: http://facebook.github.io/react/
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240