本文介绍了React的基本概念，包括其作为JavaScript库的角色，使用React的原因，如提升开发效率和组件复用。重点讲解了React的特点，如组件化、虚拟DOM和移动端开发能力。此外，详细阐述了如何创建React项目，以及JSX语法的使用，包括注意事项。还探讨了React组件的定义，函数组件与类组件的区别，并展示了模板语法，如条件渲染和列表渲染。
一、React是什么？
React是一个将数据渲染为HTML视图的开源JavaScript库。
二、为什么要使用React
1·原生JavaScript操作DOM繁琐、效率低
2·使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3·原生JavaScript没有组件化编码方案，代码复用率低。
三、React特点
1·采用组件化模式、声明式编码，提高开发效率及组件复用率。
2·在React Native中可以使用React语法进行移动端开发。
3·使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互
四、生成一个react项目构架
01.安装：
npm i -g create-react-app
02.创建myreact项目：
create-react-app myreact
03.看是不是淘宝镜像
npm config get registry
如果不是淘宝用这个：
npm config set registry https://registry.npm.taobao.org/
04运行：npm start(自动跳转)
五、jsx语法
方便js中书写html模板,javascript与html混合写法
- 只有个根节点
- {} js表达式
- {/* 注释内容*/}
- className定义类名
- 样式对象会自动展开
- 数组可以包含html ,并自定展开
React的注意事项：
-
一般采用import的方式引入React，React首字母规定大些，因为jsx会默认使用大写的React
-
会根据尖括号(<)来判断是一个html，根据花括号({)来判断是一个js js中的保留字 关键字会进行转化
-
class=>className for=>htmlFor react相邻的jsx元素，react元素，必须被一个标签包裹 <></>
-
style标签 必须是一个对象 style={{}} //{}表示js里面的{}表示是一个对象 注释 要用{}包裹
-
dangerouslySetInnerHTML 危险的，解析html用innerHtml的方式把内容塞进元素中
-
可以在页面中使用三元运算
事件方法 之前的οnclick=> onClick …
<div dangerouslySetInnerHTML={{_html:"<span>你好</span>"}}></div>
六、react的组件
组件的优点：
- 方便复用
- 方便维护
- 方便重构
组件的定义可分为2种：
- 函数声明组件
function App(){
return <div> ... </div>
}
export default App;
- 类声明组件
import React,{Componet} from 'react'
class App extends Componet {
constructor(props){
super(props)
}
state = {num:5}
render(){
return <div></div>
}
}
export default App
函数声明组件与类声明组件区别：
- 函数组件通常展示，类组件通常做为容器
- 类组件可以有state,管理数据用类组件，函组件没有state
- 函组件没有this，类组件 有this
- 函数组件没有生命周期，类组件有生命周期
七、模板语法
- 条件渲染：
不能使用if结构做条件判断
使用三元运算符做条件判断
<body>
<!-- 1.创建容器 -->
<div id="container"></div>
<script type="text/babel">
let age = 30;
// 书写jsx模板语法
const div = <div>
{/*在jsx模板语法中不能使用if结构做条件判断*/}
{/*<div>{if(age>=18){'已成年'}else{'未成年'}}</div>*/}
{/*使用三元运算符做条件判断*/}
<div>{age>=18 ? '已成年' : '未成年'}</div>
<hr />
<div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
- 列表的渲染
在遍历数组时,key需要绑定在遍历的直接子元素上
- 文本渲染：{}
dangerouslySetInnerHTML={{__html:变量名}}
扫一扫
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
