React入门

最新推荐文章于 2023-03-23 20:10:39 发布

疯狂攻城狮

最新推荐文章于 2023-03-23 20:10:39 发布

阅读量491

点赞数 1

分类专栏： web前端文章标签： React React入门 React菜鸟

本文链接：https://blog.csdn.net/qq_26790735/article/details/52129912

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React 起源于 Facebook 的内部项目，由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

1.React HTML模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
</head>
<body>
<div id="div_one"></div>
</body>
</html>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
<script type="text/babel">

..................................

注：react.min.js为React核心文件 react-dom.min.js为React操作dom的文件 browser.js将JSX语法转换为javaScript语法

最后一个script标签type属性为“text.babel”,因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel"

2.ReactDOM.render();

该方法为React最基本的方法，用于将模板转为HTML语言，并显示在指定位置；

例：

ReactDOM.render(
 <h1>React</h1>,
 document.getElementById('div_one')
 );

3.JSX语法：

允许将HTML语言与javaScript语言混写，并且不加引号，这就是JSX语法

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

javaScript表达式写在{}中：

例：

ReactDOM.render(
<h1>{1+1}</h1>,
document.getElementById('div_one')
);

样式：

例：

var myStyle = {
fontSize:30,
color:'red'
};

ReactDOM.render(
<h1 style={myStyle}>hello,world</h1>,
document.getElementById('div_one')
);

注释：

注释要写在{}里

例：

ReactDOM.render(

{/*这里是注释*/}
<h1 style={myStyle}>hello,world</h1>,
document.getElementById('div_one')
);

数组：

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

例：

var arr = [1,2,3,4];

ReactDOM.render(

<h1>{arr}</h1>,

document.getElementById('div_one')

);

HTML和React组件的区别：

要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。

要渲染 React 组件，只需创建一个大写字母开头的本地变量。

var reactMsg = <h1>hello,world</h1>; 开头为小写字母，所以为HTML；

var ReactMsg = React.createClass({....}); 开头大写字母，所以为React组件；

例：

ReactDOM.render(

reactMsg,

document.getElementById('div_one')

);

 
   ReactDOM.render( 
  

 
   <ReactMsg />, 
  

 
   document.getElementById('div_one') 
  

);

4.React组件：

var HelloWorldMsg = React.createClass({
 render: function(){
 var i = 1;
 return (
 <div>
 {/*注释要写在花括号里*/}
 <Name name={this.props.name}/>
 <Title title={this.props.title}/>
 <h1>{i=1?'true':'false'}</h1>
 <h1>{1+1}</h1>
 </div>
 );
 }
 });

var Name = React.createClass({
 render: function(){
 return <h1 style={myStyle}>{this.props.name}</h1>;
 }
 });
 
 var Title = React.createClass({
 render: function(){
 return <h1 style={myStyle}>{this.props.title}</h1>;
 }
 });

ReactDOM.render(
 <HelloWorldMsg name="tom" title="like to study React"/>,
 document.getElementById('div_one')
 );

React.createClass()方法用于生成组件类 HelloWorldMsg、Name、Title

为组件传递参数，可以使用 this.props 对象

<HelloWorldMsg/>为复合组件

5.React stats（状态）和React Props:

注：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变；

代码中通过getDefaultProps() 方法为 props 设置默认值；

6.设置stats状态：

setStats(object nextStats,function callback);

参数说明：nextStats:将要设置的新状态，该状态会与当前的stats合并；

callback：回调函数（可选），该函数会在setStats设置成功并重新渲染后调用；

例：

ReactDOM.render(
<CountNum/>,
document.getElementById('div_one')
);

注：getInitialState方法名不可改变，onclick方法名可自行更改调用，render方法名不可改动；

7.替换状态：replaceStats

replaceStats(object nextStats,function callback);

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

例：

8.设置属性：setProps

setProps(object nextProps,function callback);

参数说明：nextProps:将要设置的新属性，该属性会和当前的props合并；

callback：回调函数（可选），该函数会在setProps设置成功并重新渲染后调用；

9.替换属性：replaceProps

replaceProps(object nextStats,function callback);

参数说明：

nextProps，将要设置的新属性，该属性会替换当前的props。
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

疯狂攻城狮

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
React入门

React入门教程整理
复制链接

扫一扫

专栏目录