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

论坛 › 期权论坛 › 期权     
达叔与他的朋友们   2019-7-20 20:45   1984   0

React.JS是用于构建用户界面的JavaScript库
React.JS主要用于构建UI
下载使用：React.JS下载地址
  1. [/code][code]
复制代码
  1.   
复制代码
  1.    
复制代码
  1.     Hello React!
复制代码
  1.    
复制代码
  1.    
复制代码
  1.    
复制代码
  1.   
复制代码
  1.   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.       ReactDOM.render(   
复制代码
  1.        Hello, world!,
复制代码
  1.         document.getElementById('example')
复制代码
  1.       );   
复制代码
  1. [/code][code]  
复制代码
  1. [/code]通过npm
  2. [list][*][*][*][*][*][/list][code]$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码
  1. [/code][code]$ npm config set registry https://registry.npm.taobao.org
复制代码
  1. [/code][code]$ cnpm install [name]
复制代码
使用create-react-app快速构建
create-react-app 自动创建的项目是基于 Webpack + ES6
  1. $ cnpm install -g create-react-app
复制代码
  1. $ create-react-app my-app
复制代码
  1. $ cd my-app/$ npm start
复制代码
React.JS使用JSX来替代常规的JavaScript
使用JSX
JSX看起来类似HTML。
实例：
  1. ReactDOM.render(
复制代码
  1.     Hello, world!,
复制代码
  1.     document.getElementById('example')
复制代码
  1. );
复制代码
样式
React.JS 推荐使用内联样式
  1. var myStyle = {
复制代码
  1.     fontSize: 100,
复制代码
  1.     color: '#FF0000'
复制代码
  1. };
复制代码
  1. ReactDOM.render(
复制代码
  1.     ,
复制代码
  1.     document.getElementById('example')
复制代码
  1. );
复制代码
注释
注释需要写在{}中
数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
实例：
  1. var arr = [
复制代码
  1.   123,
复制代码
  1.   welcome,
复制代码
  1. ];
复制代码
  1. ReactDOM.render(
复制代码
  1.   {arr},
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
组件使应用更容易管理。
实例：
  1. var HelloMessage = React.createClass({
复制代码
  1.   render: function() {
复制代码
  1.     return Hello World！;
复制代码
  1.   }
复制代码
  1. });
复制代码
  1. ReactDOM.render(
复制代码
  1.   ,
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
如果需要向组件传递参数，可以使用this.props对象。
  1. var HelloMessage = React.createClass({
复制代码
  1.   render: function() {
复制代码
  1.     return Hello {this.props.name};
复制代码
  1.    }
复制代码
  1. });
复制代码
  1. ReactDOM.render(
复制代码
  1.   ,  
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
状态
  1. class Clock extends React.Component {
复制代码
  1.   constructor(props) {
复制代码
  1.     super(props);    this.state = {date: new Date()};
复制代码
  1. }
复制代码
  1.   
复制代码
  1.   render() {
复制代码
  1.     return (
复制代码
  1.       
复制代码
  1.         Hello, world!
复制代码
  1.         现在是 {this.state.date.toLocaleTimeString()}.
复制代码
  1.       
复制代码
  1.     );
复制代码
  1.   }
复制代码
  1. }
复制代码
  1. ReactDOM.render(
复制代码
  1.   ,
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
React.JS Props
  1. var HelloMessage = React.createClass({
复制代码
  1.   render: function() {
复制代码
  1.     return Hello {this.props.name};
复制代码
  1.   }
复制代码
  1. });
复制代码
  1. ReactDOM.render(
复制代码
  1.   ,
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
可以通过getDefaultProps()方法为props设置默认值。
  1. var HelloMessage = React.createClass({
复制代码
  1.   getDefaultProps: function() {
复制代码
  1.     return {
复制代码
  1.       name: '123'
复制代码
  1.     };
复制代码
  1.   },
复制代码
  1.   render: function() {
复制代码
  1.     return Hello {this.props.name};
复制代码
  1.   }
复制代码
  1. });
复制代码
复制代码
  1. ReactDOM.render(
复制代码
  1.   ,
复制代码
  1.   document.getElementById('example')
复制代码
  1. );
复制代码
React.JS API
设置状态--setState
替换状态--replaceState
设置属性--setProps
替换属性--replaceProps
强制更新--forceUpdate
获取DOM节点--findDOMNode
判断组件挂载状态--isMounted
组件生命周期状态
组件的生命周期可以分为三个状态：
mounting--已插入真实DOM
updating--正在被冲洗渲染
unmounting--已移出真实DOM
这是一个有质量，有态度的公众号


点关注，有好运
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
达叔与他的朋友们

积分:10
帖子:2
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP