版权声明：~~~~~~官话之未经允许不能转载~~~~~~ https://blog.csdn.net/qq_41653587/article/details/88579564
简单整理一下React相关知识点
关于react有些知识点的理解
组件的三个生命周期状态：
1. Mount: 插入真实DOM
2. Update:被重新渲染
3. Unmount:被移出真实DOM
---------基于webpack+es6的react项目-------------
1、创建package.json：
在webstorm中将目录拉到控制台，然后npm init 初始化即可得到package.json
2、下载react相关库
npm install react react-dom --save
3、下载babel相关库
npm install babel-core babel-preset-es2015 babel-preset-react -- save-dev
4、下载webpack相关库
npm install webpack babel-loader --save-dev
npm install webpack-dev-server
webpack配置文件webpack.config.js
const path = require(‘path’); //path内置的模块，用来设置路径
-----------关于dispatch函数--------------------
dispatch({
type: 'example/addByOne', //这里的example是model的命名空间，"/"后面的表示model中effect的异步方法名
param:param //这个表示要传递参数，当然这里可以是一个方法，作为回调方法
});
----------关于connect------------
@connect(({命名空间的名称})=>{
具体的state的参数
})
这样就可以在当前页面中调用命名空间中所定义的数据
------------effects以及reduces----------------
export default {
namespace: 'example', //表示对于整个应用不同的命名空间,以便通过this.props.example访问，和当前model文件名相同就好之前的reducer名字相同，是全局state的属性，只能为字符串，不支持.的方式建立多重
state: {num:1}, //表示当前的example中的state状态，这里可以给初始值，这里num初始为1
subscriptions: {
setup({ dispatch, history }) { // 订阅，这个实际用的少，表示监听当前state的变化
},
},
effects: { //这里是做异步处理的
*addByONe({ param}, { call, put }) {
//param是从组件router传递过来的参数,这里就是上面定义的num,也就是1
//这里的call方法可以使用param参数传递给后台程序进行处理这里，也可以调用service层的方法进行调用后端程序，
//这里的put表示存储在当前命名空间example中，通过save方法存在当前state中
//在这里可以用ajax调用后台程序处理并返回数据，有很多种处理方式，当然有些处理不需要后端的，可以直接put方法更新state数据
yield put({
type: 'save', //这个就是调用reducers中的方法进行跟新当前命名空间state的数据
num:param
});
}
},
//用来保存更新state值 上面的put方法调用这里的方法
reducers: {
save(state, action) { //这里的state是当前总的state，这里的action包含了上面传递的参数和type
return { ...state, ...action.num }; //这里用ES6语法来更新当前state中num的值
},
},
};
********************************
- 在本地练习React框架时，可以去BootCDN(https://www.bootcdn.cn/)搜索所需要的插件，可以参考我的第一个React demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>My react study</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel"> //注意此处的type要写成text/babel
//1.创建虚拟DOM
let ele = <h1>Hello World!!</h1>;
//console.log(ReactDOM);
//2.渲染虚拟DOM
ReactDOM.render(ele,document.getElementById('root'));
</script>
</body>
</html>
- 在React框架中需要了解到：
1.react使用JSX语法来创建虚拟DOM
2.react会自动遍历数组，并且显示数组中的所有元素（其实我的理解就是：react会将虚拟的DOM元素循环遍历为真实DOM，并将其渲染到页面中）
3.要了解ES6语法中的map方法的使用:不熟悉的可以查看链接*阮一峰的ES6总结*
贴代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="container"></div>
<div id="container2"></div>
<script type="text/babel">
let names = ['Tom','Jerry','Mary'];
ReactDOM.render(
<ul>
{
names.map((item,index) => {
return <li key={index}>{item}</li>
})
}
</ul>,
document.getElementById('container')
);
</script>
</body>
</html>
- react的组件：不着急，慢工出细活，以下可能都是组件相关的demo了，既然是框架就必定有其封装的意义哦！！！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="container"></div>
<div id="container2"></div>
<script type="text/babel">
/**
* 1.自定义组件
* -工厂（无状态）函数（最简洁，推荐使用）
* function MyComponent(){
* return <h1>工厂函数创建自定义组件</h1>
* }
* -类定义组件（ES6语法，复杂组件，最推荐使用）
* class MyComponent extends React.Component{
* render(){
* return <h1>类定义自定义组件</h1>
* }
* }
* -ES5创建自定义组件（不推荐使用）
* var MyComponent = React.createElement()
*2.注意事项：
* （1）自定义的组件名必须首字母大写
* （2）虚拟DOM元素必须只有一个根元素
* （3）虚拟DOM元素必须有结束标签
*3.ReactDOM.render()渲染组件标签的基本流程
* (1)React内部会创建组件实例对象
* (2)得到包含虚拟DOM并且解析为 真实DOM
* (3)插入到指定的页面元素内部
* 4.react组件实例对象的三个属性：
* props
* refs
* state
*/
//1.创建组件
function MyComponent(){
return <h1>工厂函数创建的自定义组件</h1>
}
class MyComponent2 extends React.Component{
render(){
console.log(this instanceof MyComponent2);
return <h1>类定义创建的自定义组件</h1>
}
}
//2.渲染组件
ReactDOM.render(<MyComponent />,document.getElementById('container'));
ReactDOM.render(<MyComponent2 />,document.getElementById('container2'));
</script>
<script type="text/babel">
function Person(name, age){
}
let person = new Person('Tom',39);
console.log(person);
class Person1{
constructor(name,age){
this.name = name;
this.age = age;
}
}
class Son extends Person1{
constructor(name,age,xxx){
super(); //调用父类的方法
this.name = name;
this.age = age;
this.xxx = xxx;
}
showName(){
console.log(this.name);
}
}
let son = new Son('Tom',23,"000000");
console.log(son);
son.showName();
</script>
</body>
</html>
- 关于component中实例对象特征之一——props属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>Props</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/**
* 1.每个组件对象都会有一个props（properties的简写）属性
* 2.组件标签的所有属性都保存在props中
* 3.内部读取某个属性值：this.props.属性名
* 4.props作用：通过标签属性从组件外向组件内传递数据（只读）
* 5.对props中的属性值惊醒类型限制和必要性限制
* Person.propTypes = {
* name:React.PropTypes.string.isRequired,
* age:React.PropTypes.number.isRequired
* }
* 6.扩展属性：将对象的所有户型通过props传递
* <Person {...person}>
* 7.默认属性值：
* Person.defaultProps = {
* name:'Mary'
* };
* 8.组件类的构造函数
*/
let person = {
name: 'Kobe',
gender: "男",
age: '43'
};
class Person extends React.Component {
render() {
console.log(this.props);
return (
<ul>
<li>姓名：{this.props.name}</li>
<li>性别：{this.props.gender}</li>
<li>年龄：{this.props.age}</li>
</ul>
);
}
}
//设置组件的默认Props值
Person.defaultProps = {
gender: '男'
};
//对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
gender: React.PropTypes.string.isRequired,
age: React.PropTypes.string.isRequired
};
//渲染组件
ReactDOM.render(<Person {...person}/>, document.getElementById('example'));
//ReactDOM.render(<Person name={person.name} gender={person.gender} age={person.age}/>,document.getElementById('example'));
//ReactDOM.render(<Person name={person.name} age={person.age}/>,document.getElementById('example'));
// ReactDOM.render(<Person name={person.name} age={person.age}/>,document.getElementById('example'));
</script>
</body>
</html>
- 来个组件嵌套的demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>组件嵌套</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/**
*
*/
//定义App组件
class App extends React.Component {
render() {
console.log(this.props.arr);
let {arr} = this.props; //ES6的结构赋值
return (/* div是根标签，如果没有根标签则会报错 */
<div>
{
arr.map((item,index) => {
return <Welcome name={item} key={index}/>
})
}
</div>
);
}
}
// class Welcome extends React.Component {
// render() {
// return (
// <div>{this.props.name}</div>
// );
// }
// }
function Welcome(props){
return (
<div>{props.name}</div>
);
}
let arr = ['kobe', 'Mary', 'Tom', 'kobe', 'Mary', 'Tom'];
//渲染组件
ReactDOM.render(<App arr={arr}/>, document.getElementById('example'));
</script>
</body>
</html>
- 组件实例对象特性之二——refs属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>refs-event</title>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
/**
* 组件的第二个属性refs
* -组件内的标签都可以定义refs属性来标识自己
* -在组件中可以通过this.refName来得到对应的真实DOM对象
* -作用：用于操作指定的ref属性的dom元素对象（表单标签居多）
*
*/
class App extends React.Component{
constructor(props){ //constructor方法只会执行一次
super(props);
this.name = name;
console.log(this); //这里的this指向的是组件的实例对象
//找到函数
//用什么去强制绑定this：call ? apply（前两个方法绑定this指向之后会立即执行） ? bind(返回的是一个函数)
//this--->实例对象
this.handleClick = this.handleClick.bind(this);
}
//类定义中的普通方法中的this指向null
handleClick(){
//获取前边input输入的内容
console.log(this); //自定义的方法中，this指向的都是null
let value = this.refs.msg.value;
alert(value);
}
handleBlur(event){
console.log(event);
alert(event.target.value);
}
render(){
return (
<div>
<input ref="msg" type="text" />
<button onClick={this.handleClick}>提示输入语句</button>
<input type="text" onBlur={this.handleBlur} placeholder="失去焦点提示数据" />
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('example'));
</script>
</body>
</html>
- component中实例对象特性三——state
这是第一个demo哦
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>Demo</title>
</head>
<body>
<div id="box"></div>
<hr>
<div id="box2"></div>
<script type="text/babel">
/**
* 1.App
* 2.AddTodo
* 3.数据源初始化在哪：App组件
*
*/
class A extends React.Component {
render() {
return (
<div>
<h1>Simple TODO List</h1>
<input type="text"/>
<button>ADD #5</button>
<ul>
<li>CF</li>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<li>学习</li>
</ul>
</div>
);
}
}
// 定义App组件
class App extends React.Component {
constructor(props) {
super(props);
//初始化数据
this.state = {
todos: ['吃饭', '睡觉', '打豆豆']
};
//更改add的this指向
this.add = this.add.bind(this);
}
add(newTodo){
console.log(newTodo);
//更新状态
let todos = this.state.todos;
todos.unshift(newTodo);
this.setState({todos});
}
render() {
let {todos} = this.state;
return (
<div>
<h1>Simple TODO List</h1>
<AddTodo add={this.add} length={todos.length} />
<TodoList todos={todos}/>
</div>
);
}
}
// 定义AddTodo组件
class AddTodo extends React.Component {
constructor(props) {
super(props);
//强制绑定this，在构造函数中this指向实例对象
this.addTodo = this.addTodo.bind(this);
}
addTodo(){
//收集数据
let newTodo = this.refs.newTodo.value;
//先判断是否符合要求
if(!newTodo.trim()){
alert("输入的内容不能为空");
return;
}
this.props.add(newTodo);
//添加成功之后清空输入框
this.refs.newTodo.value = '';
}
render() {
return (
<div>
<input type="text" ref="newTodo"/>
<button onClick={this.addTodo}>ADD #{this.props.length}</button>
</div>
);
}
}
//定义TodoList组件
class TodoList extends React.Component {
render() {
//解构赋值
let {todos} = this.props;
return (
<ul>
{
todos.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
);
}
}
//渲染组件
ReactDOM.render(<A/>, document.getElementById('box'));
ReactDOM.render(<App/>, document.getElementById('box2'));
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>state</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
/**
* 1.组件被称为“状态机”，通过更新组件的状态值来更新对应的页面提示（重新渲染）
* 2.初始化状态：
* constructor (props) {
* super(props);
* this.state = {
* stateProp1:value1,
* stateProp2:value2,
* };
* }
* 3.读取某个状态值
* this.state.statePropertyName
* 4.更新状态----->组件状态更新
* this.setState({
* stateProp1:value1,
* stateProp2:value2,
* })
* 5.请区别一下组件的props和state属性？
* ---props只能读，state可以改变
* ---props中的数据是组件外部传进来的，state的数据是我们自己定义的，在组件内部私有化的数据
*
*
*
*/
class IsLike extends React.Component{
//初始化
constructor(props){
super(props);
this.state = {
isLike: false
};
//强制绑定this
this.changeLike = this.changeLike.bind(this);
}
changeLike(){
console.log(this);
this.setState({
isLike:!this.state.isLike,
});
}
render(){
//es6解构赋值
let {isLike} = this.state;
//利用三元运算符进行判断
let msg = isLike ? '我喜欢你':'你喜欢我';
console.log(isLike);
return (
<h1 onClick={this.changeLike} >
{msg}
</h1>
);
}
}
ReactDOM.render(<IsLike />,document.getElementById('box'))
</script>
</body>
</html>
- react是单向数据流，但是可以通过state实现数据双向绑定的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>controlled</title>
</head>
<body>
<div id="root"></div>
<!--
react是个单向数据流
受控组件：
可以利用state实现数据双向绑定的效果：利用setState({xxx:xxx})来改变初始值的状态
-->
<script type="text/babel">
class TowWay extends React.Component{
constructor(props){
super(props);
this.state ={
msg:'atguigu.com'
};
//强制改变thi指向
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
this.setState({
msg:event.target.value
});
}
render(){
let {msg} = this.state;
return (
<div>
<input onChange={this.handleChange} type="text" value={msg} />
<p>{msg}</p>
</div>
);
}
}
ReactDOM.render(<TowWay />,document.getElementById('root'));
</script>
</body>
</html>
- 关于生命周期的一些话
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/**
* react中内置的实例方法中this均指向实例对象
* setTimeout(function(){},1000) 是延时定时器
* setInterval(function(){},1000) 是循环定时器
*
*
*/
class Life extends React.Component {
constructor(props) { //（只执行一次）
super(props);
this.state = {
person: {
name: 'Kobe',
age: 30
}
};
this.handleClick = this.handleClick.bind(this);
console.log('constructor()');
}
//组件将要被挂载（只执行一次）
componentWillMount() {
console.log("componentWillMount() 组件将要被挂载");
console.log(this);
//可以在此阶段发送ajax请求（但是可能有一定的缺陷），开启定时器：
// 如果在这里发送请求如果得不到请求的数据会一直等数据来，不执行下一步render(）方法
setTimeout(function(){ //定时器中的this指向window
this.setState({
person: {
name: 'Mary',
age: 18
}
})
}.bind(this), 2000);
setTimeout(()=>{ //es6箭头函数，自己没有this，所以向外层看，外层函数的this指向实例对象，所以bingo
this.setState({
person: {
name: 'Jerry',
age: 0
}
})
},3000)
}
//组件挂载完毕（只执行一次）
componentDidMount() {
console.log("componentDidMount() 组件挂载完毕");
setTimeout(()=>{
//卸载组件的方法： ReactDOM.unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
},4000)
this.IntervalId = setInterval(()=>{
console.log("setInterval()");
},1000)
}
//组件将要更新
componentWillUpdate() {
console.log("componentWillUpdate() 组件将要更新");
//可以在此阶段发送ajax请求，开启定时器
}
//组件更新完毕
componentDidUpdate() {
console.log("componentDidUpdate() 组件更新完毕")
}
//组件将要被卸载
componentWillUnmount() {
console.log("componentWillUnmount() 组件将要被卸载")
//通常在此做一些收尾工作，比如关掉定时器,不关掉会影响性能
clearInterval(this.IntervalId);
}
handleClick() {
this.setState({
person: {
name: 'Tom',
age: 20
}
})
}
//执行多次
render() {
console.log('render()');
let {person} = this.state;
return (
<div>
<h1 onClick={this.handleClick}>{person.name}</h1>
<h1>{person.age}</h1>
</div>
);
}
}
ReactDOM.render(<Life/>, document.getElementById("root"));
</script>
</body>
</html>
- 定时闪烁
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<title>生命周期练习</title>
<style type="text/css">
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Life extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "定时闪烁",
opacity: 1
}
}
componentWillMount() {
this.start = setInterval(() => {
this.setState({
msg: "定时闪烁",
opacity: 0.5
})
}, 1000);
}
componentDidMount() {
let opacity = this.state.opacity;
this.second = setInterval(() => {
opacity -= 0.05;
console.log(opacity)
if(opacity<0.1){
opacity=1;
}
this.setState({
msg: "定时闪烁",
opacity: opacity
})
}, 100)
}
componentWillUpdate() {
}
componentDidUpdate() {
}
componentWillUnmount() {
clearInterval(this.start);
}
render() {
let info = this.state;
return (
<div style={{opacity: info.opacity}}>
{info.msg}
</div>
);
}
}
ReactDOM.render(<Life/>, document.getElementById("root"));
</script>
</body>
</html>
- react中的ajax
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../../js/react.js"></script>
<script src="../../../js/react.dom.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<script src="../../../js/babel.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/fetch/3.0.0/fetch.js"></script>
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
/**
* 1.react没有ajax模块
* 继承其他的js库（比如jQuery/fetch/axios）,发送ajax请求
* 2.使用axios
* https://github.com/mzabriskie/axios
* 3.使用fetch
* https://github.github.io/fetch/
* http://segmentfault.com/a/1190000003810652
* 4.测试url
* https://api.github.com/users/octocat/gists
*
*
*/
class AjaxComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
gistUrl: null
}
}
componentDidMount() {
// 发送ajax请求
let url = "https://api.github.com/users/octocat/gists";
axios.get(url)
.then(response => {
console.log(response);
let data = response.data;
//更新状态
this.setState({
gistUrl: data[0].html_url
})
})
.catch(error => {
console.log(error);
})
fetch(url)
.then(response => {
//
return response.json();
})
.then(data => { //这里是真正获取数据的回调
console.log(data);
//更新状态
this.setState({
gistUrl: data[0].html_url
})
})
.catch(e => {
console.log("Oops, error");
});
}
render() {
let {gistUrl} = this.state;
if (!gistUrl) {
return (
<div>
<h2>Loading...</h2>
</div>
);
} else {
return (
<a href={gistUrl}>Click here</a>
);
}
}
}
ReactDOM.render(<AjaxComponent/>, document.getElementById('box'));
</script>
</body>
</html>
本地图片加载
- 使用require
render(){
return (
<div>
<img src={require('本地图片路径')} />
</div>
);
}
- 使用import
import 图片名称自己定义 from '本地图片路径'
render(){
return (
<img src={import中引入图片时定义的名称} />
);
}
文末福利：可以拉取github上的相关笔记(我在B站找的尚硅谷的视频，这个地址也是视频中提到的，各位可以借阅)代码：
好好学习react-点击跳转