React基础
React安装
- npm i react react-dom 安装依赖
- npx create-react-app package-name 初始化项目;
- npm start 启动项目;;
组件化
在react 脚手架中使用react
1.导入react和react-dom两个包
import React from ‘react’
import ReactDOM from ‘react-dom’
2.调用React.createElement()方法创建react元素
3.调用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render()只用于web应用
JSX使用(JavaScript XML简写 【React核心内容】
属性名使用驼峰命名法
特殊属性名:class=>className for=>htmlFor tabindex=>tabIndex
使用JSX时用小括号包裹 避免JS自动插入分号
如果一个元素没有子节点可以直接使用单标签结束
JSX表达式
JSX条件渲染
JSX列表渲染
使用数组的map()方法
遍历谁把key加给谁(尽量避免用索引号当做key)
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
JSX的样式处理
行内样式–style
style{{}}
类名–className(推荐)
[声明式语法]
const el=<h1>Hello React</h1>
[命令式语法]
const el = React.createElement('h1',{title:'AAAA'},'Hello React')
ReactDOM.render(el,document.getElementById('root'))
JSX中使用JS表达式
{[‘a’,‘b’].join(‘—’)} JSX数组转化字符串
{true+‘’} 转化成字符串
不能写if/for/switch语句
【条件渲染】
1.三元表达式
2.if/else
3.逻辑运算符
【列表渲染 要加key】
const arr=['1','2','3']
<ul>
{
arr.map((item)=>{
<li key={item}>{item}</li>
})
}
</ul>
React组件基础
1.组件的创建方式:函数组件/类组件
2.无状态(函数)组件,负责静态结构展示
3.有状态(类)组件,负责更新UI
4.绑定事件注意this指向问题
5.推荐使用受控组件来处理表单
6.完全利用js语言的能力创建组件
组件表示页面中的部分功能
组合多个组件实现完完整的页面功能
特点:可复用、独立、可组合
组件创建方式
使用函数创建组件
函数组件:使用JS的函数(或箭头函数)创建的组件
约定1:函数名称必须以大写字母开头
约定2:函数组件必须要有返回值,表示该组件的结构
如果返回值为null,表示不渲染任何内容
使用类创建组件
使用ES6的class创建组件
约定1:类名称必须以大写字母开头
约定2:类组件应该继承ReactComponent父类,从而可以使用父类中提供的方法或属性
约定3:类组件必须提供render()方法
约定4:render()必须要有返回值,表示该组件的结构
const Hello = (props) => {
return (
<div>
<h1>props:{props.name}</h1>
</div>
);
};
/*类组件
如果写了构造函数,应该将props传递给super(),否则无法在构造函数中获取到props
*/
class Hello extends React.Component {
/*
推荐将props传递给父类构造函数
*/
constructor(props) {
super(props);
console.log(props);
}
render() {
return (
<div>
<h1>props:{this.props.age}</h1>
{this.props.tag}
</div>
);
}
}
*抽离为独立的JS文件
把组件放到单独的JS文件中
创建js文件
在文件中导入react
创建组件
在js文件中导出该组件
在页面中导入组件
渲染页面
React事件处理
事件绑定
on+事件名称={事件处理程序}
使用驼峰命名法
函数中的事件绑定
const Hello = () => {
function click() {
alert("Click");
}
return (
<div>
这是第一个单独的组件
<br />
<button onClick={click}>click</button>
</div>
);
};
类中的事件绑定
class Hello extends React.Component {
// 事件处理程序
click() {
alert("Click");
}
render() {
return (
<div>
这是第一个单独的组件
<br />
<button onClick={this.click}>click</button>
</div>
);
}
}
区别:
函数中的事件处理函数加function 类不加
函数中的事件绑定{中不加this} 类要加this
事件对象 e
事件对象阻止默认行为
e.preventDefault()
有状态组件和无状态组件
函数组件又叫做无状态组件,类组件又叫做有状态组件
状态(state)即数据
函数组件没有自己的状态,只负责数据展示(静态)
类组件有自己的状态,负责更新UI(动态)