理论知识在本博客开始就有介绍,这里不再重复。本篇主要从react结构写法,css修饰以及简单的逻辑事件操作来学习react。
react框架自13年5月份提出来,发展的主要有15版跟16版,两个版本差异还是蛮大的。react15,低版支持高版;而react16,高版拒绝低版。主要原因还是react更多的遵循原生js的语法,15版的话,封装了很多函数之类的,可以直接来用,支持高版。而高版更接近原生js的写法,在低版里面有的是不支持的。
第一,写react基本结构,首先就要引入文件
- react.min.js--------包含了组件构建以及核心diff算法
- react-dom.min.js----将虚拟dom渲染真实dom
- browser.min.js------jsx语法的翻译器
以上是低版的引入,高版的话是react.production.min.js、react-dom.production.min.js和browser.min.js三个文件,作用同上。
第二步就是敲代码了,上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react低版</title>
<script src="../js/react/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--容器1-->
<div id="out"></div>
<hr />
<!--容器2-->
<div id="inner"></div>
</body>
<script type="text/babel">
//创建react组件
var Demo = React.createClass({
render(){
return(
<div>
<div>I am react15</div>
<div>你好 react低版</div>
</div>
)
}
})
var Demo1 = React.createClass({
render(){
return(
<div>
<div>hello react15</div>
<div>你好 react15</div>
<Demo2 />
</div>
)
}
})
//低版中写入高版
class Demo2 extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>低版写高版</h1>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo />,document.getElementById("out"))
ReactDOM.render(<Demo1 />,document.getElementById("inner"))
// ReactDOM.render(<Demo2 />,document.getElementById("inner"))
//会覆盖,所以当做嵌套组件写入<Demo1 />
</script>
</html>
以上是react15版本的写法,主要就三步,创建组件,渲染到容器,修改script脚本解析的是babel语言。下面是react16版本的写法,也类似,知识16版遗弃了React.createClass这种写法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高版react</title>
<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
</div>
</body>
<!--解析jsx语法-->
<script type="text/babel">
//创建react
class Demo extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>我是高版react</h1>
</div>
)
}
}
//渲染
ReactDOM.render(<Demo />,document.getElementById("out"))
</script>
</html>
第三,以高版为例,来写入一些css样式
- 内部样式的css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高版react</title>
<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p{
background: pink;
}
.red{
color: red;
}
#blue{
color: blue;
}
.yellow{
color: yellow;
}
</style>
</head>
<body>
<div id="out"></div>
<hr />
<!--这里不写闭合可以,但是在return里面的结构标签必须要严格闭合-->
<input type="text">
<p class="red">我是红色的</p>
<p id="blue">我是蓝色的</p>
<p class="yellow">我是黄色的</p>
</body>
<script type="text/babel">
//小写首字母对应 DOM 元素 大写首字母对应组件元素自然
class Demo extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>我是高版react</h1>
<input type="text" />
<p class="red">我是红色的</p>
<p id="blue">我是蓝色的</p>
<p class="yellow">我是黄色的</p>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById("out"))
</script>
</html>
高版里面的class内部样式还是生效的,但是在低版里面class是不生效的,需要改成className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react低版</title>
<script src="../js/react/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p{
background: pink;
}
.red{
color: red;
}
#blue{
color: blue;
}
.yellow{
color: yellow;
}
</style>
</head>
<body>
<div id="out"></div>
</body>
<script type="text/babel">
//创建react组件
var Demo = React.createClass({
render(){
return(
<div>
<div>I am react15</div>
<div>你好 react低版</div>
{/*<p class="red">我是红色的</p>*/}
<p className="red">我是红色的</p>
<p id="blue">我是蓝色的</p>
{/*<p class="yellow">我是黄色的</p>*/}
<p className="yellow">我是黄色的</p>
</div>
)
}
})
ReactDOM.render(<Demo />,document.getElementById("out"))
</script>
</html>
- 行间样式的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高版react</title>
<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out"></div>
</body>
<script type="text/babel">
//全局写法:代码可复用,提高代码复用率
var sty={
background:"yellow",
color:"pink",
fontSize:"32px"
}
class Demo extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>我是高版react</h1>
{/*行间样式写法*/}
<p style={{color:"red",fontSize:"22px"}}>我是红色的</p>
{/*全局的调用*/}
<p style={sty}>我背景是黄色的</p>
{/*原生链调用*/}
<p style={this.sty}>我背景是粉色的</p>
</div>
)
}
}
//原生链写法:保证代码的私有性,只是组件所有,不会影响其他组件
Demo.prototype.sty={
background:"pink"
}
ReactDOM.render(<Demo />,document.getElementById("out"))
</script>
</html>
低版写法也就这三种,跟高版是一样的。
注意:
- reactjs 行内 样式均是以json形式存在{color:'red'},react将变量嵌套jsx中,style={变量名称}
- html的转义
React 会将所有要显示到 DOM 的字符串转义,防止 XSS。
后台传过来的数据带页面标签的是不能直接转义的,具体转义的写法如下:
var content='<strong>content</strong>';
React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高版react</title>
<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out"></div>
</body>
<script type="text/babel">
var str = "hello"
var str1 = "<span>hello</span>"
class Demo extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>我是高版react</h1>
<h1>{str}</h1>
<h1 dangerouslySetInnerHTML={{__html:str1}}></h1>
</div>
)
}
}
ReactDOM.render(<Demo />,document.getElementById("out"))
</script>
</html>
-
在jsx中写逻辑 --要写在render和return之间
-
jsx中注释标签的方法 {/**标签**/} 或者{/*标签*/}
-
组件嵌套 不能多个节点渲染,否则最后一个组件覆盖前面的
第四,事件机制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高版react</title>
<script src="../js/react/react.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/react/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out"></div>
</body>
<script type="text/babel">{{
//1.全局写法
var tap=function(){
console.log("aa,事件一")
}
class Demo extends React.Component{
//2.直接写事件机制,私有属性方法
tap(){
console.log("事件二")
}
constructor(props){
super(props)
}
render(){
return(
<div>
<h1>我是高版react</h1>
<button onClick={tap()}>事件1</button>
<button onClick={tap.bind(this)}>事件2</button>
{/*全局*/}
<button onClick={tap}>事件一</button>
{/*组件私有方法*/}
<button onClick={this.tap}>事件二</button>
{/*原型链*/}
<button onClick={this.tap1}>事件三</button>
{/*如果组件私有方法和原型链同名,那么调用的都会是原型链的函数*/}
</div>
)
}
}
//3.原型链写法
Demo.prototype.tap1=function(){
console.log("事件三")
}
ReactDOM.render(<Demo />,document.getElementById("out"))
}}</script>
</html>