【React学习】React 实例
引入方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,world! Hello,ccc!</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********
将元素渲染到 DOM 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
const element = <h1>hi,ccc!</h1>;
ReactDOM.render(
element,
document.getElementById("hi")
);
</script>
</body>
</html>
效果:
let和const命令:
ES6新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
const
声明一个只读的常量。一旦声明,常量的值就不能改变。
const
声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。
参考:React 语法之let和const命令https://cloud.tencent.com/developer/article/1036032
*********************
更新元素渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function tick() {
const element =
(
<div>
<h1>hi,ccc,hi!time?</h1>
<h2>现在是:{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。
***
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
*********************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function Clock(props) {
return (
<div>
<h1>hello,ccc!</h1>
<h2>now:{props.date.toLocaleString()}</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class Clock extends React.Component {
render() {
return (
<div>
<h1>hi,ccc!</h1>
<h2>now{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
注意:不要以(作为一行的开头。否则出错不显示
**********
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.hi {
color: deeppink;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = (
<h1 className="hi">hi,ccc!</h1>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>
效果:
*****
js的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="../js/hi-react.js"></script>
</body>
</html>
hi-react.js
const element = (
<h1 className="hi">hi,ccc!</h1>
);
ReactDOM.render(element, document.getElementById('root'));
效果:
****************
表达式计算:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<h1>计算1+1={1 + 1}</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
**************
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值,则会输出 false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var i = 100;
ReactDOM.render(
<h1>{i === 100 ? 'true' : 'false'}</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********
样式需要写成驼峰式命名法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var cccStyle = {
fontSize: 50,
color: 'red'
};
ReactDOM.render(
<h1 style={cccStyle}>hi,ccc</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
*********************
注释:
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<div>
{/*
*多行注释...
*/}
<h1>hi,ccc!</h1>
{/*单行注释...*/}
</div>,
document.getElementById('hi')
);
</script>
*************
数组,会自动展开:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var arr = [
<h1>hi,ccc!</h1>,
<p>这是一个p标签,1+1={1 + 1}</p>,
<span>hi,span</span>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('hi')
);
</script>
</body>
</html>
这里显示出来的span标签效果不是内联的
效果:
**********
组件:2种写法:用函数或者ES6 class 来定义一个组件:
注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。比如用一个div包裹多个其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayHi(props){
return <h1>hi,ccc!</h1>;
}
const element = <SayHi/>;
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class SayHi extends React.Component {
render() {
return <h1>hi,ccc!</h1>;
}
}
const element = <SayHi/>
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果同上
************
向组件传递参数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayHi(props) {
return <h1>你好!{props.name}</h1>;
}
const element = <SayHi name="ccc"/>;
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
************
复合组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayName(props) {
return <p>名字是:{props.name}</p>;
}
function SayAge(props) {
return <p>年龄是:{props.age}</p>;
}
function SayTel(props) {
return <p>电话号码是:{props.tel}</p>;
}
function App() {
return (
<div>
<SayName name="ccc"/>
<SayAge age="20"/>
<SayTel tel="13612341234"/>
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
**************
React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>hi,ccc</h1>
<h2>现在是:{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
ReactDOM.render(
<Clock/>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********
相关文章
- 一个Scrapy爬虫实例
- JSP开发简单实例演示
- Oracle列转行函数 Listagg() 语法详解及应用实例「建议收藏」
- 面试官问:静态变量、实例变量在JVM内存区域是怎么布局的?线程安全吗?
- 遗传算法的应用实例python实现_python遗传算法库
- python程序化交易实例-用 Python 实现你的量化交易策略「建议收藏」
- 【正则表达式】快速学习一个c语言的实例
- 单实例Primary快速搭建Standby RAC参考手册(19.16 ADG)
- mongoDB 实现主从读写分离实现的实例代码
- 学习Linux脚本编程:经典实例分析(linux脚本实例)
- 操作指南Oracle11g 实例指南:快速学习操作基础(oracle11g实例)
- 学习Linux: 如何优化内存使用(linux内存实例)
- 学习 Oracle 视图:实例讲解(oracle视图实例)
- 单实例Linux:提升服务器性能的有效方案(单实例linux)
- Linux防火墙iptables学习笔记(五)linux+iptables构筑防火墙实例
- MySQL中的IF语法使用实例(mysql的if语法)
- Oracle函数实例:学习编写优化SQL语句(oracle函数例子)
- 深入学习Linux软中断:掌握实用实例方法(linux软中断实例)
- 新手学习C语言从MySQL新增实例入门(c mysql 新增)
- 学习Ajax基于MySQL的实例实践(ajax实例 mysql)
- abp oracle 应用实例解决企业信息管理难题(abp oracle)
- 实例学习SQL的Select命令
- jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果
- python基础学习第二弹类属性和实例属性
- linq查询Linq高级查询实例代码
- php上传文件,创建递归目录的实例代码
- 学习php分页代码实例
- android实现蓝牙文件发送的实例代码,支持多种机型
- PythonORM框架SQLAlchemy学习笔记之关系映射实例
- VC++简单实现关机、重启计算机实例代码
- PHP中使用Imagick实现各种图片效果实例