React-day01 入门知识
目录
React介绍
Facebook脸书-> Instagram照片墙 。 于2013年5月开源
帮助开发者简洁、直观地构建高性能的UI界面
- 高效：模拟Doument Object Model，减少DOM交互 (速度快)
- 灵活：可以与已知的库配合使用
- 声明式： 帮助开发者直观的创建UI
- 组件化：把相似的代码通过封装成组件进行复用
官网
官方网站： https://reactjs.org/
React开发环境初始化 SPA
- react ：React开发必备库
- react-dom：web开发时使用的库，用于虚拟DOM，移动开发使用ReactNative
脚手架初始化项目（方便，稳定）*
-
执行初始化命令：
#保证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
通过webpack进行初始化
配置镜像地址
-
查看当前镜像配置：
npm config listnpm config get registry -
设置当前镜像地址
npm config set registry https://registry.npm.taobao.org/npm config set disturl https://npm.taobao.org/dist
开发工具配置
- 添加JavaScript语法支持
- 安装开发插件： JavaScript，npm, markdown, Node.js, Reactjs
元素渲染
-
元素是构成React应用的最小单位
import React from 'react'; import ReactDOM from 'react-dom'; const element = ( <div> <h1>HaHa!</h1> <h2>Hello Itheima element</h2> </div> ); // ReactDOM进行元素渲染 ReactDOM.render( element, document.getElementById('root') ); -
React对JSX语法转换
const element = ( <div className="eleClass"> HaHa! </div> );转换js后
const element = React.createElement( "div", { className: "eleClass" }, "HaHa!" );
组件及组件状态
组件可以将界面分割成独立的、可复用的组成部分。只需要专注于构建每个单独的部分。比如按钮，对话框，列表，输入框都是组件。
- 组件可以接受参数（props）,可以返回一个在页面上展示的React元素
函数定义组件(无状态)
无状态组件：一般用于简单的页面展示
// 用函数定义了名为Hello组件
function Hello(props) {
return <h1>Hello {props.name} !</h1>;
}
// react进行元素渲染
ReactDOM.render(
<Hello name="itheima props"/>,
document.getElementById('root')
);
类定义组件(有状态)*
- class 必须要ES6支持
有状态组件：可以维护自己的状态State信息，完成更加复杂的显示逻辑
// 用类定义 名为Hello组件
class Hello extends React.Component {
render(){
return <h1>Hello {this.props.name} !</h1>;
}
}
// react进行元素渲染
ReactDOM.render(
<Hello name="itheima class"/>,
document.getElementById('root')
);
- 以上两种组件效果在React相同
类定义组件名称必须是大写
建议在return元素时，用小括号()包裹
组合组件
-
组件之间可以相互引用，通常把App作为根组件
// 用类定义 名为Hello组件 class Hello extends React.Component { render() { return <h1>Hello {this.props.name} !</h1>; } } // 根组件 function App(props) { return ( <div> <div> <h2>团队名称: {props.team}</h2> <p>成员个数: {props.count}</p> <p>成立时间: {props.date.toLocaleString()}</p> </div> <Hello name="悟空" /> <Hello name="八戒" /> <Hello name="沙僧" /> <Hello name="三藏" /> </div> ); } // react进行元素渲染 ReactDOM.render( <App team="西天取经团" count={4} date={new Date()}/>, document.getElementById('root') );
-
注意：组件的返回值只能有一个根元素，所以用一个div包裹所有Hello元素
- 在google插件市场搜索安装React查看DOM结构
Props属性*
- props有两种输入方式：
- 引号"" ：输入字符串值，
- 大括号{} ：输入JavaScript表达式，大括号外不要再添加引号。
- props的值不可修改，属性只读，强行修改报错
- 类定义组件中使用props需要在前边加 this.
State状态*
-
自动更新的时钟
class Clock extends Component { render(){ return ( <div> <h1>当前时间:</h1> <h3>current: {new Date().toLocaleString()}</h3> </div> ); } } setInterval(() => { ReactDOM.render( <Clock />, document.getElementById('root') ); }, 1000);应用一般执行一次ReactDOM.reader() 渲染
在组件内部进行更新， 每个时钟内部都维护一个独立的date信息
-
在组件内部使用局部state状态属性
class Clock extends Component { constructor(props) { super(props); // state定义:在constructor构造函数进行state状态的初始化 this.state = { title: "时钟标题", date: new Date() }; setInterval(() => { this.tick(); }, 1000); } tick(){ // 更新date, 数据驱动, 必须通过setState函数修改数据并更新ui this.setState({ date: new Date() }) } render(){ return ( <div> <h1>{this.state.title}</h1> <h3>current: {this.state.date.toLocaleString()}</h3> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') ); -
state特性：
- state 一般在构造函数初始化。
this.state={...} - state可以修改，必须通过
this.setState({...})更新并渲染组件 - 调用setState更新状态时，React最自动将最新的state合并到当前state中。
- state 一般在构造函数初始化。
组件生命周期
-
生命周期常用的函数
componentDidMount：组件已挂载， 进行一些初始化操作
componentWillUnmount： 组件将要卸载，进行回收操作，清理任务
事件处理
定义组件事件
class App extends Component {
handleClick(e){
console.log("handleClick!")
console.log(this);
}
render(){
return (
<div>
<button onClick={() => this.handleClick()}>
按钮:{'{() => this.handleClick()}'}
</button>
</div>
);
}
}
属性初始化器语法*
// 属性初始化器语法 (Property initializer syntax)
handleClick = () => {
console.log("handleClick!")
console.log(this);
}
参数传递*
class App extends Component {
handleClick(e, str, date){ // 参数要和调用者传入的一一对应
console.log(this)
console.log(e)
console.log(str, date)
}
render(){
return (
<button onClick={(e)=>this.handleClick(e, "参数" , new Date())}>
按钮1:{'箭头函数'}
</button>
);
}
}
参数要和调用者传入的一一对应
计数器游戏
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 类定义组件的写法
class App extends Component {
constructor(props) {
super(props);
// 绑定this到事件函数
this.countPlus = this.countPlus.bind(this);
this.state = {
count: 0,
timeSurplus: 10
};
}
// 组件已挂载, 开启周期任务
componentDidMount() {
this.timerId = setInterval(() => {
this.setState((preState) => ({
timeSurplus: preState.timeSurplus - 1
}))
// 在合适的时候, 结束周期函数
if(this.state.timeSurplus <= 0){
clearInterval(this.timerId)
}
}, 1000);
}
countPlus(){
// 更新当前count数字.
console.log(this)
// 如果时间到了, 返回
if (this.state.timeSurplus <= 0){
return;
}
// 更新数据会自动触发UI的重新render
// this.setState({
// count: this.state.count + 1
// })
// 通过之前state状态更新现在的状态
this.setState((preState) => ({
count: preState.count + 1
}))
}
render() {
return (
<div>
<h1>{this.props.title}</h1>
<h2>
{
this.state.timeSurplus <= 0 ?
("时间到, 总数" + this.state.count) :
("剩余时间:" + this.state.timeSurplus)
}
</h2>
<button onClick={this.countPlus}>
计数: {this.state.count}
</button>
</div>
);
}
}
ReactDOM.render(
<App title="计数器, 试试你的手速!"/>,
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>
