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

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 ></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)]

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

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

达叔小生的简书！

相关推荐