React笔记
React是一个用于构建用户界面的javaScript
库,起源于facebook
的内部项目,后续在13年开源了出来
React 特点:
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
CDN
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"</script>
使用React脚手架初始化项目
- 初始化项目,命令:
npx create-react-app my-pro
npx
目的:提升包内提供的命令行工具的使用体验- 原来:先安装脚手架包,再使用这个包中提供的命令
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
- create-react-app 这个是脚手架名称 不能随意更改
- my-pro 自己定义的项目名称
- 启动项目,在项目根目录执行命令:
npm start
显示如下页面,证明项目启动成功
基本方法
创建元素React.createElement()
var reactElement = React.createElement(
... // 标签名称字符串/ReactClass,
... // [元素的属性值对对象],
... // [元素的子节点]
)
1、参数:
1)第一个参数:可以是一个html标签名称字符串,也可以是一个ReactClass
(必须);
2)第二个参数:元素的属性值对对象(可选),这些属性可以通过this.props.*来调用;
3)第三个参数开始:元素的子节点(可选)。
2、返回值:
一个给定类型的ReactElement
元素
例:
let h1 = React.createElement('h1',null,'我是标题')
let h2 = React.createElement('h1', null, 'hello wrod');
let div = React.createElement('div', {className: 'list'}, h1,h2);
渲染到页面ReactDOM.render
ReactDOM.render(template,targetDOM)
方法接收两个参数:
-
第一个是创建的模板,多个 **
dom
**元素外层需使用一个标签进行包裹,如; -
第二个参数是插入该模板的目标位置。
例:
ReactDOM.render(h1,document.getElementById('root'))
ReactDOM.render(<App />,document.getElementById('root'))
index.js
可通过index.js创建元素、渲染页面
创建元素
let h1 = <h1>我是通过JSX创建的元素</h1>
渲染页面
ReactDOM.render(h1,document.getElementById('root'))
例:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
let h1 = <h1>我是通过JSX创建的元素</h1>
ReactDOM.render(h1, document.getElementById('root'))
// ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
// document.getElementById('root')
// );
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
JSX
JSX是JavaScript XML 的简写,表示在JavaScript代码中写HTML格式的代码
优势:声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率
1、所有的模板要被一个根节点包含起来,在render函数中return返回的只能包含一个顶层标签,否则也会报错
2、模板元素不要加引号
3、JSX基本语法规则,遇到HTML标签(以<开头),就用HTML规则解析;遇到代码块(以{开头),就用JS规则解析
4、绑定属性注意:
class 要变成 className
for 要变成 htmlFor
style属性和以前的写法有些不一样
<div style={{'color':'blue'}}>{this.state.title}</div>
<div style={{'color':this.state.color}}>{this.state.title}</div>
5、循环数据要加key
6、组件的构造函数中一定要注意 super
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象
constructor(props){
super(props); /*用于父子组件传值 固定写法*/
this.state={
userinfo:'张三'
}
}
7、组件名称首字母大写、组件类名称首字母大写
8、react解析html
<div dangerouslySetInnerHTML={{__html: this.state.list.htmlStr}}> </div>
9、条件判断的四种写法
用三元表达式****, 使用dom元素**变量,直接调用函数,使用逻辑运算符,**利用即时执行函数
class HelloWorld extends React.Component{
render(){
return <p>Hello {
(function(obj){
if(obj.props.name){
return obj.props.name;
}else{
return "World";
}
}(this))
}</p>
}
}
- 使用JSX语法创建react元素
let h1 = <h1>我是通过JSX创建的元素</h1>
- 使用ReactDOM来渲染元素
ReactDOM.render(h1,document.getElementById('root'))