React-day01 入门知识
文章目录
React介绍
Facebook脸书-> Instagram照片墙 。 于2013年5月开源
帮助开发者简洁、直观地构建高性能的UI界面
- 高效：模拟Doument Object Model，减少DOM交互 (速度快)
- 灵活：可以与已知的库配合使用
- 声明式： 帮助开发者直观的创建UI
- 组件化：把相似的代码通过封装成组件进行复用
官网
官方网站： https://reactjs.org/
脚手架初始化项目（方便，稳定）
-
执行初始化命令：
#保证Node版本>=6 npm install -g create-react-app create-react-app my-app cd my-app npm start ## 如果npm版本5.2.0+，可以使用npx进行初始化 npx create-react-app my-app cd my-app npm start #或者使用yarn npm install -g yarn yarn global add create-react-app create-react-app my-app
配置镜像地址
-
查看当前镜像配置：
npm config listnpm config get registry -
设置当前镜像地址
npm config set registry https://registry.npm.taobao.org/分发主要是给别人用的
npm config set disturl https://npm.taobao.org/dist
配置端口
在package.json的scripts下配置
"start": "SET PORT=3456 & react-scripts start"
React开发环境初始化 SPA
- react ：React开发必备库
- react-dom：gweb开发时使用的库，用于虚拟DOM，移动开发使用ReactNative
元素渲染
-
元素是构成React应用的最小单位
import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render((<div>hello</div>),document.getElementById('root')) -
jsx语法
import React from 'react' import ReactDOM from 'react-dom' const ele = (<div>hello</div>) ReactDOM.render(ele,document.getElementById('root'))
组件及组件状态
组件可以将界面分割成独立的、可复用的组成部分。只需要专注于构建每个单独的部分。比如按钮，对话框，列表，输入框都是组件。
- 组件可以接受参数（props）,可以返回一个在页面上展示的React元素
函数定义组件(无状态)
无状态组件：一般用于简单的页面展示
-
无参数函数组件的定义
import React from 'react' import ReactDOM from 'react-dom' function Hello(){ return(<div>hello</div>) } ReactDOM.render(<Hello></Hello>,document.getElementById('root')) -
有参数函数组件的定义
import React from 'react' import ReactDOM from 'react-dom' function Hello(props){ return(<div>{props.name}</div>) } ReactDOM.render(<Hello name={'bill'}></Hello>,document.getElementById('root'))
类定义组件(有状态)
- class 必须要ES6支持
有状态组件：可以维护自己的状态State信息，完成更加复杂的显示逻辑
-
类组件无参数
import React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component{ render() { return ( <div> hello class component </div> ); } } ReactDOM.render(<Hello></Hello>,document.getElementById('root')) -
类组件有参数
import React from 'react' import ReactDOM from 'react-dom' class Hello extends React.Component{ render() { return ( <div> hello {this.props.name} </div> ); } } ReactDOM.render(<Hello name={'bill'}></Hello>,document.getElementById('root'))
类定义组件名称必须是大写
建议在return元素时，用小括号()包裹
组合组件
组件之间可以相互引用，通常把App作为根组件
-
普通组件
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component{ render() { return ( <div> <h1>西天取经团</h1> <p>成员数量:5</p> <p>成立时间:{new Date().toLocaleString()}</p> <div>hello 三藏</div> <div>hello 悟空</div> <div>hello 八戒</div> <div>hello 沙僧</div> <div>hello 白龙马</div> </div> ); } } ReactDOM.render((<App></App>),document.getElementById('root')) -
组件参数
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component{ render() { return ( <div> <h1>西天取经团</h1> <p>成员数量:{this.props.count}</p> <p>成立时间:{this.props.date}</p> <div>hello {this.props.names[0]}</div> <div>hello {this.props.names[1]}</div> <div>hello {this.props.names[2]}</div> <div>hello {this.props.names[3]}</div> <div>hello {this.props.names[4]}</div> </div> ); } } ReactDOM.render((<App count={5} date={new Date().toLocaleString()} names={['三藏','悟空','八戒','沙僧','白龙马']}></App>),document.getElementById('root')) -
组合组件
import React from 'react' import ReactDOM from 'react-dom' function Hello(props) { return( <div>hello {props.name}</div> ) } class App extends React.Component{ render() { return ( <div> <h1>西天取经团</h1> <p>成员数量:{this.props.count}</p> <p>成立时间:{this.props.date}</p> <Hello name={this.props.names[0]}></Hello> <Hello name={this.props.names[1]}></Hello> <Hello name={this.props.names[2]}></Hello> <Hello name={this.props.names[3]}></Hello> <Hello name={this.props.names[4]}></Hello> </div> ); } } ReactDOM.render((<App count={5} date={new Date().toLocaleString()} names={['三藏','悟空','八戒','沙僧','白龙马']}></App>),document.getElementById('root'))
- 注意：组件的返回值只能有一个根元素，所以用一个div包裹所有Hello元素
- 在google插件市场搜索安装React查看DOM结构
Props属性
- props有两种输入方式：
- 引号"" ：输入字符串值，
- 大括号{} ：输入JavaScript表达式，大括号外不要再添加引号。
- props的值不可修改，属性只读，强行修改报错
- 类定义组件中使用props需要在前边加 this.
State状态(时钟)
-
无更新时钟
import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component{ render() { return ( <div> <h1>时钟</h1> <div>{new Date().toLocaleString()}</div> </div> ); } } ReactDOM.render((<Clock></Clock>),document.getElementById('root')) -
传统更新
import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component{ render() { return ( <div> <h1>黑马时钟</h1> <div>{new Date().toLocaleString()}</div> </div> ); } } setInterval(()=>{ ReactDOM.render((<Clock></Clock>),document.getElementById('root')) },1000) -
错误的更新方式
import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component { constructor() { super() this.date = new Date() setInterval(()=>{ console.log('执行了') this.date = new Date() },1000) } render() { return ( <div> <h1>时钟</h1> <div>{this.date.toLocaleString()}</div> </div> ); } } ReactDOM.render((<Clock></Clock>), document.getElementById('root')) -
state更新
import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component { constructor() { super() this.state = { date: new Date() } setInterval(() => { this.setState({ date: new Date() }) }, 1000) } render() { return ( <div> <h1>时钟</h1> <div>{this.state.date.toLocaleString()}</div> </div> ); } } ReactDOM.render((<Clock></Clock>), document.getElementById('root'))
-
state特性：
- state 一般在构造函数初始化。
this.state={...} - state可以修改，必须通过
this.setState({...})更新并渲染组件 - 调用setState更新状态时，React最自动将最新的state合并到当前state中。(title)
- state 一般在构造函数初始化。
组件生命周期
-
生命周期常用的函数
componentDidMount：组件已挂载， 进行一些初始化操作
componentWillUnmount： 组件将要卸载，进行回收操作，清理任务
//创建组件
var ShowTitle = React.createClass({
getDefaultProps:function () {
return {
title:"将前端坚持到底！"
}
},
render:function(){
return <h1>{this.props.title}</h1>
}
})
React在ES6的实现中去掉了getInitialState这个hook函数
-
时钟的声明周期
import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component { constructor() { super() this.state = { date: new Date() } } componentDidMount(){ setInterval(() => { this.setState({ date: new Date() }) }, 1000) } render() { return ( <div> <h1>黑马时钟</h1> <div>{this.state.date.toLocaleString()}</div> </div> ); } } ReactDOM.render((<Clock></Clock>), document.getElementById('root'))
多个组件生命周期维护
事件处理
###事件处理
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
handClick(){
alert('点击了按钮')
}
render() {
return (
<div>
<div>{this.props.title}</div>
<button onClick={this.handClick}>按钮</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Hello title={'事件处理'}></Hello>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
###事件处理_箭头函数
import React from 'react'
import ReactDOM from 'react-dom'
class Counter extends React.Component {
constructor(){
super()
this.state={
count:0
}
}
//不能访问this
// handClick(){
// this.setState({
// count:this.state.count+1
// })
// }
//使用箭头函数
handClick=()=>{
this.setState({
count:this.state.count+1
})
}
render() {
return (
<div>
<h1>计算器</h1>
<div>{this.state.count}</div>
<button onClick={this.handClick}>按钮</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Counter></Counter>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
###事件处理_普通函数bind
import React from 'react'
import ReactDOM from 'react-dom'
class Counter extends React.Component {
constructor(){
super()
this.state={
count:0
}
}
handClick(){
this.setState({
count:this.state.count+1
})
}
render() {
return (
<div>
<h1>计算器</h1>
<div>{this.state.count}</div>
<button onClick={this.handClick.bind(this)}>按钮</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Counter></Counter>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
###事件处理_取消默认处理
import React from 'react'
import ReactDOM from 'react-dom'
class Counter extends React.Component {
constructor(){
super()
this.state={
count:0
}
}
handClick(event){
event.preventDefault()
console.log('访问百度')
}
render() {
return (
<div>
<a href='http://www.baidu.com' onClick={this.handClick}>百度</a>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Counter></Counter>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
###事件处理_直接处理
import React from 'react'
import ReactDOM from 'react-dom'
class Counter extends React.Component {
constructor(){
super()
this.state={
count:0
}
}
handClick(event){
event.preventDefault()
console.log('访问百度')
}
render() {
return (
<div>
<button onClick={()=>alert('点击了按钮')}>按钮</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Counter></Counter>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
###事件处理_传参
import React from 'react'
import ReactDOM from 'react-dom'
class Counter extends React.Component {
constructor(){
super()
this.state={
count:0
}
}
handClick1(event,msg){
console.log(event)
alert(msg)
}
handClick2(msg,event){
console.log(event)
}
render() {
return (
<div>
<button onClick={(e)=>this.handClick1(e,'hello')}>按钮</button>
<button onClick={this.handClick2.bind(this,'hello')}>按钮</button>
</div>
);
}
}
class App extends React.Component{
render() {
return (
<div>
<Counter></Counter>
</div>
);
}
}
ReactDOM.render((<App></App>), document.getElementById('root'))
计数器游戏
-
计数器游戏
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { constructor() { super() this.state = { time: 10, count:0 } } componentDidMount() { setInterval(() => { this.setState({ time: this.state.time - 1 }) }, 1000) } handClick=()=>{ if(this.state.time<=0)return this.setState({ count:this.state.count+1 }) } render() { let temp = null if(this.state.time<=0){ temp=<h2>时限已到,总共按了{this.state.count}次</h2> }else{ temp = <h3>剩余时间:{this.state.time}</h3> } return ( <div> <h1>计数器游戏,试试你的手速</h1> {temp} <button onClick={this.handClick}>我是按钮:{this.state.count}</button> </div> ); } } ReactDOM.render((<App></App>), document.getElementById('root')) -
计数器游戏_控件显示和隐藏
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { constructor() { super() this.state = { time: 10, count:0 } } componentDidMount() { setInterval(() => { this.setState({ time: this.state.time - 1 }) }, 1000) } handClick=()=>{ if(this.state.time<=0)return this.setState({ count:this.state.count+1 }) } render() { let temp = null let pump = null if(this.state.time<=0){ temp=<h2>时限已到,总共按了{this.state.count}次</h2> pump = null }else{ temp = <h3>剩余时间:{this.state.time}</h3> pump = <h3>加油点...</h3> } return ( <div> <h1>计数器游戏,试试你的手速</h1> {temp} <button onClick={this.handClick}>我是按钮:{this.state.count}</button> {pump} </div> ); } } ReactDOM.render((<App></App>), document.getElementById('root'))
style样式
###JSX写法
-
直接写在style属性中
<button style={{width: 200, height: 200}}>我是按钮</button> -
通关变量声明样式并引用
const btnStyle = { width: 200, height: 200 }; ... <button style={btnStyle} onClick={this.handleClick}>我是按钮</button>
引入css文件
1.创建.css文件
.btn {
width: 300px;
height: 200px;
background-color: coral;
}
2.导入css文件
import './css/counter.css';
或者
require('./css/counter.css')
3.控件使用css样式
<button className="btn">我是按钮</button>
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
