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

[外链图片转存失败(img-cn4fbVDq-1563575047348)(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下载地址

<!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对象。

var HelloMessage = React.createClass({

  render: function() {

    return <h1>Hello {this.props.name}</h1>;

   }

});

ReactDOM.render(

  <HelloMessage name="coding" />,

  document.getElementById('example')

);

状态

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

var HelloMessage = React.createClass({

  render: function() {

    return <h1>Hello {this.props.name}</h1>;

  }

});

ReactDOM.render(

  <HelloMessage name="123" />,

  document.getElementById('example')

);

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

var HelloMessage = React.createClass({

  getDefaultProps: function() {

    return {

      name: '123'

    };

  },

  render: function() {

    return <h1>Hello {this.props.name}</h1>;

  }

});

ReactDOM.render(

  <HelloMessage />,

  document.getElementById('example')

);

React.JS API

设置状态–setState

替换状态–replaceState

设置属性–setProps

替换属性–replaceProps

强制更新–forceUpdate

获取DOM节点–findDOMNode

判断组件挂载状态–isMounted

组件生命周期状态

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

mounting–已插入真实DOM

updating–正在被冲洗渲染

unmounting–已移出真实DOM

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

欢迎关注达叔小生的简书！

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

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