目录
- React-day01 入门知识
- React介绍
- 官网
- React开发环境初始化 SPA
- 脚手架初始化项目（方便，稳定）*
- 通过webpack进行初始化
- 配置镜像地址
- 开发工具配置
- 元素渲染
- 组件及组件状态
- 函数定义组件(无状态)
- 类定义组件(有状态)*
- 组合组件
- Props属性*
- State状态*
- 组件生命周期
- 事件处理
- 定义组件事件
- 属性初始化器语法*
- 参数传递*
- 计数器游戏
- style样式(JSX写法)
- React介绍
React-day01 入门知识
React介绍
Facebook脸书-> Instagram照片墙 。 于2013年5月开源
帮助开发者简洁、直观地构建高性能的UI界面
- 高效：模拟Doument Object Model，减少DOM交互 (速度快)
- 灵活：可以与已知的库配合使用
- 声明式： 帮助开发者直观的创建UI
- 组件化：把相似的代码通过封装成组件进行复用
官网
官方网站： https://reactjs.org/
中文网站： https://doc.react-china.org/
React开发环境初始化 SPA
- react ：React开发必备库
- react-dom：web开发时使用的库，用于虚拟DOM，移动开发使用ReactNative
脚手架初始化项目（方便，稳定）*
执行初始化命令：
#保证Node版本>=6 npm install -g create-react-app create-react-app my-appcd my-app npm start ## 如果npm版本5.2.0+，可以使用npx进行初始化 npx create-react-app my-appcd my-app npm startnpm和yarn命令对比
通过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函数修改数据并更新uithis.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>
