一、基础
-
介绍:起源于Facebook,于2013年5月开源。
-
特点:声明式设计;高效(减少dom操作);灵活;JSX(JS拓展语法);组件;单向响应的数据流。
-
虚拟DOM:把真实DOM树转成对象树,再通过diff算法,减少重绘于回流。
-
搭建环境(提前安装node环境)
①全局安装
create-react-app
——npm install create-react-app -g
;②创建一个项目
create-react-app app的名字
(cd app的名字;npm start
开始项目);③还有一种临时安装的方式:
npx create-react-app app的名字
;④如果觉得下载的慢,可以使用
nrm use taobao
切换下载镜像。 -
文档介绍:
①
README.md
使用文档;②
node_modules
所有的依赖安装目录;③
package-lock.json
锁定依赖的版本号,团队开发时保持一致性;④
package.json
项目的配置文件;⑤
public
静态文件目录;⑥
src
开发用源代码目录。
二、JSX
1. 基本使用
-
createElement方法过于繁琐
React.createElement("div",{id: "d1", className: "item"}, React.createElement("ul", null, React.createElement("li",null, "ok"), React.createElement("li",null, "yes"), React.createElement("li",null. "no")))
<div id="d1" class="item"> <ul> <li>ok</li> <li>yes</li> <li>no</li> </ul> </div>
JSX:javascript xml
JSX是React的核心内容
-
使用JSX创建react元素:
const title = <h1>123</h1>
-
原理:babel进行编译,转成js对象,用ReactDOM.render()方法将这个对象转成DOM元素,最后插入页面。
-
注意1:JSX不是ES的标准语法,它是ES的语法拓展;
需要使用babel编译处理后才能在浏览器环境中使用 ;
编译JSX的包: @babel/preset-react。
-
注意2:React元素的属性名使用驼峰命名法;
如果元素没有子节点,可直接使用单标签,但是以 />结尾 ;
可以使用()包裹JSX,以避免一些问题。
2.JSX中使用js表达式
语法:{JS表达式}
let ok = 123;
const text=(
<p>{ok}</p>
)
3.条件渲染
可以使用if ,三元运算符,逻辑运算符。
let is = true;
const ok = () => {
if(is)return(<div>aaa</div>)
return(<div>bbb</div>)
}
4.列表渲染
使用数组的map方法
const books =[
{id: 1, name: "西游记",author: "吴承恩"},
{id: 2,name: "水浒传",author:"施耐庵"},
{id: 3.name: "红楼梦",author: "曹雪芹"},
{id: 4,name: "三国演义",author:"罗贯中"}
]
const list =(
<ul>
{books.map(item => <li key={item.id}>书名:{item.name},作者:{item.author} </li>)}
</ul>
)
5.样式处理
-
行内样式style
const title =<h1 style={ {width: "200px", height: "100px"}}>你好</h1>
注意不是两组花括号,外边代表是is,里边代表是对象 。
-
类名 className(推荐):使用import导入css样式。
React完全利用JS语言自身的能力来编写UI,而不是增强HTML功能。