React
React 的发展历史
Facebook 内部用来开发 Instagram，2013 年开源了 React，随后发布了 React Native
React入门
- 安装
- cdn
npm install react -S
npm install react-dom -S
npm install @babel/standalone -S
npm i -S react react-dom @babel/standalone
下载完成后，用
基础使用
- 第一个react程序HelloWorld
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"> </script>
<script src="node_modules/@babel/standalone/babel.js"></script>
<body>
<div id='root'></div>
<!--
当 babel-standalone 发现 type="text/babel" 类型标签的时候：
1. 将 script 标签中的内容转换为浏览器可以识别的 JavaScript
-->
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
- jsx语法
- 概念
var element = Hello, world!
;
它被称为 JSX，是一个 JavaScript 的语法扩展
JSX 全称 JavaScript XML ，是一种扩展的 JavaScript 语言，它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。
- 基本语法规则
1.必须只能有一个根节点
2.多标签写到包到一个小括号中，防止 JavaScript 自动分号不往后执行的问题。
3.遇到 HTML 标签 （以 < 开头） 就用 HTML 规则解析
4.单标签不能省略结束标签。
5.遇到代码块（以 { 开头），就用 JavaScript 规则解析
6.JSX 允许直接在模板中插入一个 JavaScript 变量
7.如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中
8.单标签必须结束 /> - 组件与props
props 是该组件对外的接口，用于接收数据, state是对内接口,相当于vue中data(){ list: []}
// es5 函数组件
// 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
function Welcome(props){
return <h1>Hello, world!{props.name}</h1>;
}
// es6 class组件
class Hello extends React.Component {
// 构造函数
constructor(props) {
super(props); //调用父类构造函数
}
render(){
return (
<div>
<h1>class组件 Hello, world!{this.props.name}</h1>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</div>
)
}
}
<Welcom name='react'></Welcome>
<Hello name='vue'/>
- state与生命周期
- state组件内数据变更的接口，
- state用法
在构造方法constructor中定义,
改变state中数据值，必须使用setState方法，
react元素中通过this.state.属性名，获取值
- 组件生命周期方法
componentDidMount() 组件已经被渲染到 DOM 中后运行
componentWillUnmount() 当 DOM 中 Clock 组件被删除的时候 - 示例
class Clock extends React.Component{
constructor(props){
super(props);
this.state = {
currentDate: new Date(),
username: '小明',
password: '',
}
}
render(){
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.currentDate.toLocaleTimeString()}.</h2>
<h3>{this.state.username}</h3>
</div>
)
}
// 启动定时器
componentDidMount() {
console.log('componentDidMount >>>');
this.timerID =setInterval(() => this.tick(), 1000);
}
// 清除定时器
componentWillUnmount(){
clearInterval( this.timerID);
console.log('清除定时器');
}
tick(){
// 改变state中数据只能通过setState方法
this.setState({
currentDate : new Date()
});
}
}
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);
事件处理
在事件绑定的方法中用到this，一定要通过bind(this)绑定
this.onHandleClick = this.onHandleClick.bind(this);
class App extends React.Component{
constructor(props){
super(props);
}
onHandleClick(){
alert('hello world');
}
render(){
return (
<div>
<button onClick={this.onHandleClick}>按钮</button>
</div>
)
}
}
// function onHandleClick() {
// alert('hello world');
// }
// const element = (
//
//
//
// )
ReactDOM.render(
<App/>,
document.getElementById('root')
);
列表与keys
class ListUl extends React.Component{
constructor(props){
super(props);
this.state = {
courses : ['html','javascript','css','vue','react']
}
}
render(){
return (
<div>
<ul>
{
// this.state.courses.map((item)=>{
// return {item} ;
// } )
}
{this.getLiItem()}
</ul>
</div>
)
}
getLiItem(){
return this.state.courses.map((item,index)=>{
return <li key={index}>{item}</li>;
} )
}
}
ReactDOM.render(
<ListUl/>,
document.getElementById('root')
);
表单
// 打印表单输入框数据
class FromName extends React.Component{
constructor(props){
super(props);
this.state = {
username: ''
}
this.onHandleSubmit = this.onHandleSubmit.bind(this);
this.onHandleChange = this.onHandleChange.bind(this);
}
onHandleSubmit(e){
alert('hello ：'+ this.state.username);
e.preventDefault(); //阻止默认submit提交事件,不再执行action请求刷新页面
}
onHandleChange(e){
this.setState({
username: e.target.value // e.target.value获取当前表单项值
});
}
render(){
return (
<div>
<form onSubmit={this.onHandleSubmit}>
<input value={this.state.username} placeholder='请输入信息' onChange={this.onHandleChange} />{this.state.username}
<input type="submit" value="提交" />
</form>
</div>
)
}
}
ReactDOM.render(
<FromName />,
document.getElementById('root')
);