当前位置：首页 > 资讯 > 系统环境 > 服务器应用

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

时间：2019-08-22 01:27 作者：达叔小生来源：达叔小生阅读：351
扫一扫，手机访问

摘要：标题图React.JS是用于构建客户界面的JavaScript库React.JS主要用于构建UI下载使用：React.JS下载地址 !DOCTYPE html html head meta charset="UTF 8" / title Hello React! /tit

标题图

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--正在被冲洗渲染