1.特点
1)组件化、声明式编码(原生js 命令式编码)
命令式:你往左走三步,拿水给我
声明式:嗓子干
2)React Native可以使用React进行移动端开发(js编写)
3) 虚拟dom+diffing算法,减少与真实dom的交互
2.hello,React
1)js文件
2)相关代码
<!--容器 -->
<div id="test"></div>
<!--引入react核心库 顺序-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--babel-->
<script type="text/babel">
//1.创建虚拟DOM (不加引号)
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面 ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
3.两种方式创建虚拟DOM(js,jsx)
1)jsx(同上)
2)js(一般不用)
<body>
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--javascript-->
<script type="text/javascript">
//1.创建虚拟DOM const VDOM = React.creatElement(标签名,标签属性,标签内容)
const VDOM = React.createElement('h1',{id:'title'}, React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面 ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
4.虚拟DOM和真实DOM
1)虚拟DOM本质是Object类型的对象;
2)虚拟DOM属性少,真实DOM属性多,因为虚拟DOM是react內部再用,不需要真实DOM那么多属性;
3)虚拟DOM最终会被react转化为真实DOM,呈现在页面上。
5.JSX语法规则
1)定义虚拟DOM不写引号
const VDOM=(
<h2 id="atguigu">
<span>Hello,React</span>
</h2>
)
const VDOM = <h1>Hello,React</h1>
2)标签中混入js表达式时,要用{}
一定注意区分js语句和js表达式:
①表达式会产生一个值,可以放在任何一个需要值的地方(const x=表达式)。例:a,a+b,demo(1),arr.map(),function test(){}
②语句(代码):if,for,switch(){case:xxx}
const myId="aTgUiGu"
const myData="Hello,React"
const VDOM=(
<h2 id={myId.toLowerCase()}>
<span>{myData.toLowerCase()}</span>
</h2>
)
3)css类名不用class,用classname
const VDOM=(
<h2 className="title" id={myId.toLowerCase()}>
<span>{myData.toLowerCase()}</span>
</h2>
)
4)内联样式要用style={{key:value}}的形式,key小驼峰形式
<span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>
5)虚拟DOM只能有一个根标签
6)标签必须闭合
7)标签首字母:
若小写字母开头则转为html中同名元素,若html中无该标签对应同名元素,则报错;
若大写字母开头,React就去渲染对应的组件,若组件没有定义,则报错。
6.JSX练习
动态获取数据效果图:
代码:
<div id="test"></div>
<!--babel-->
<script type="text/babel">
const data=['Angular','React','Vue']
//1.创建虚拟DOM
const VDOM=(
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面ReactDOM.render(虚拟DOM,容器)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
7.模块与组件、模块化和组件化
1)模块:一个js文件
2)组件:拆分,得以复用