react 教程
一、React安装
1 、 使用npm安装脚手架工具create-react-app
npm install -g create-react-app
2、使用脚手架工具create-react-app创建项目
- 在需要创建项目的位置打开命令行
- 输入create-react-app + 项目名称的命令，比如：
create-react-app todolist
- 当项目创建完成后，可以进入项目，并启动：
cd todolist
npm start
- 项目启动之后浏览器显示
react启动.png
新生命周期.png
3、项目目录结构
参考：菜鸟教程
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
二、React技术
1、元素表示
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容，有：const，let，var
三者区别：
- const 在 ES6 中，const 只限制对应的变量不能够被再次赋值；但是变量的属性可以被再次赋值。
- let 避免重复定义了变量，无意间修改了全局变量；是定义block local variable的。
- var 非常灵活
2、常用函数
函数1：ReactDOM.render(x,x);渲染元素
// 定义一个元素
const element = <h1>Hello, world!</h1>;
/**
* ReactDOM.render(标签元素内容, document.getElementById('元素id'))
* 将元素内容渲染到指定元素
*/
ReactDOM.render(
element,
document.getElementById('divId')
);
函数2：setInterval(function, 秒数);计时器
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick, 1000);
函数3：function name(参数)方法可以成为一个元素
// props是参数，方法之中获得参数，直接调用props.自定义.xx
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
<Clock date={new Date()} />
函数4：class name extends React.Component{}类可以成为一个元素
// React内置render调用方法，需要调用参数时，应该取变量this.props.xx.xx
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
<Clock date={new Date()} />
函数5：JSX支持JavaScript表达式，表达式写在{}中
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
函数6：JSX元素支持样式
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
函数7：html注释需写在{}中
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
函数8：JSX支持元素数组
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
函数9：&&运算
// true && 输出；false && 什么也不做
{
unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 条未读信息。
</h2>
}
函数10：三目运算
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
函数11：map列举，注意使用map时最好加上key
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{numbers}</ul>,
document.getElementById('example')
);
函数12：this.setState设置状态
/**
* 方法一
*/
class Counter extends React.Component{
constructor(props) {
super(props);
this.state = {clickCount: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
}
render () {
return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
}
}
ReactDOM.render(
<Counter />,
document.getElementById('example')
);
/**
* 方法二
*/
this.setState({
date: new Date()
});
函数13：replaceState，setProps，replaceProps，forceUpdate，findDOMNode，isMounted
3、生命周期
旧的生命周期
旧生命周期.png
新的生命周期
新生命周期.png
通过对state变量更新自动更新组件
- 调用
componentDidMount()与componentWillUnmount()钩子 - 在
componentDidMount()中添加更新state，使用定时器等 -
componentWillUnmount()中卸载缓存，定时器等
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
fuction 中的this是function本身，JSX表达式{}中this时Component类的指代
state 和 props的区别
- state是组件自身拥有，自身可以改变；
- props是父组件传递下去的，自身不可以改变
class WebSite extends React.Component {
constructor() {
super();
this.state = {
name: "菜鸟教程",
site: "https://www.runoob.com"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
props 设置默认值
HelloMessage.defaultProps = {
name: 'Runoob'
};
4、点击事件
-
onClick={} -
{}调用的是中间变量，存在的问题是事件的this指代的实例会消失
/**
* 方法一：构造器绑定
*/
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
/**
* 方法二：方法调用中绑定
*/
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 点击事件的方法绑定当前实例
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('example')
);
/**
* 方法三：使用function方法调用
*/
class LoggingButton extends React.Component {
handleClick(e) {
console.log('this is:', this);
}
render() {
// 这个语法确保了 `this` 绑定在 handleClick 中
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
/**
* 方法四：使用function方法调用
*/
class LoggingButton extends React.Component {
handleClick = () => {
console.log('this is:', this);
}
render() {
// 这个语法确保了 `this` 绑定在 handleClick 中
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
5、AJAX请求
- React本身不带有发送ajax的库，所以需要使用其他库
- axios
- fetch
- jquery
- ...
/**
* 使用jquery
*/
$.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
)
/**
* 使用axios
*/
axios.post(url,{参数对象})
.then(response=>{
console.log(response)
})
.catch(error =>{
console.log(error.message)
})
/**
* 使用fetch
*/
loadCommentsFromServer: function() {
fetch(this.props.url).then(function(response){
// 在这儿实现 setState
});
}
// 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
componentWillUnmount() {
this.serverRequest.abort();
}
网友评论