recat基础知识目录
* 1.html模板
添加引入react的链接
三个样式有顺序
1 react.development
2 react-dom.develop
3 babel.min
* 2.ReactDOM.render()
输出
ReactDOM.render(
输出内容的代码体,
document.querySelector('绑定节点')
)
* 3.JSX 语法
<>代表html代码块 {}代表js代码块
<div>
<p>html块 {js块}</p>
</div>
* 4.组件 & props
通过继承React.Component类来定义一个组件
class Person extends React.Component{}
组件内部由三部分构成 构造器: constructor 执行父类构造器: super 执行体:render
class Person extends React.Component{
constructor(){
super();
}
render(){
return(
JSX代码块
)
}
}
* 5.props & 纯函数
props 组件传来的参数
react组件必须是纯函数(输入相同的值返回的都是固定值的函数)
* 6.事件
绑定事件 绑定this bind 用于保持指向不变
* 7.列表渲染
通过父组件把数据传递给子组件的props
子组件内部直接获取数据
遍历通过map 和key绑定标识
渲染代码块
map((item,index)=>{
return (
<div key={index}>{item}</div>
)
})
* 8.条件渲染 相当于vue的v-if 和 v-show
if else if(A){a}else{b} 通过判断A的布尔值决定执行a或b
&& a&&{b} 通过判断A的布尔值决定要不要执行b
三目运算符 A?{a}:{b} 通过判断A的布尔值来决定执行a或b
* 9.this.state
子组件内部定义数据
this.state{
show:false
}
修改子组件内部的数据 类似小程序里修改data里变量一样
this.setState({
show:true
})
通过测试得知:子组件constructor里的变量随意定义
修改的时候只需this.set变量 变量首字母大写就行
* 10.style和class
* 11.生命周期
* 12.表单
* 13.获取真实的DOM节点
* 14.this.props.children
1.html模板
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
// script的类型必须是text/babel
<script type="text/babel">
// todo
</script>
</body>
</html>
2.ReactDOM.render()
作用: 编译模板,把模板挂载到指定的节点上
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById('root')
)
</script>
3.JSX 语法
说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:
1.js代码需要用{}括起来
2.React编译规则: 遇到<开头就看作是html,遇到{开头则视为js
<!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">
<title>Document</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
const person = {
name: 'huruqing',
age: 108
};
const element =
<h1>
<p>姓名: {person.name}</p>
<p>年龄: {person.age}岁</p>
</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
4.组件
1.用es5定义一个react组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
// es5组件的写法,一个函数就是一个组件
function Welcome(props) {
return (
<h1>
<p>姓名: {props.person.name}</p>
<p>年龄: {props.person.age}</p>
</h1>
)
}
const person = {
name: 'huruqing',
age: 108
}
ReactDOM.render(
<Welcome person={person} />,
document.getElementById('root')
)
</script>
2.es6的class和class继承
<script>
/**
* 面向对象中的继承
* es6中的类和类的继承
*/
// 定义一个类
class Person {
// 构造器(初始化类的实例)
constructor() {
// alert('哈哈哈哈');
this.mouth = '1张';
this.leg = '两条';
}
eat() {
console.log('人类是个吃货');
}
speak() {
console.log('会说人话');
}
}
var person = new Person();
console.log(person);
// 继承
class Man extends Person {
constructor(name,age) {
// 执行父类构造器
super();
this.name = name;
this.age = age;
}
}
var man = new Man('张三',100);
console.log(man);
console.log(man.leg);
man.speak();
</script>
3.用es6定义个react组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
<h1>
<p>姓名: </p>
<p>年龄: </p>
</h1>
</div>
</body>
</html>
<script type="text/babel">
/**
* es6使用class的形式来创建组件,继承React的Component类,
* 后面我们更多的使用这种方式来创建组件
*/
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<h1>
<p>姓名: {this.props.person.name}</p>
<p>年龄: {this.props.person.age} </p>
</h1>
)
}
}
const person = {
name: 'huruqing',
age: 108
}
ReactDOM.render(
<Welcome person={person} />,
document.getElementById('root')
)
</script>
5.props和纯函数
1.相同的输入有相同的输出,输入可以确定输出,这就是纯函数
2.对待props就像对待纯函数一样,遵循可以通过输入确定输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
// 这是个纯函数,输入什么,得到什么是一定的,同样的输入必定有同样的输出
const sum = (a, b) => {
return a + b;
}
sum(2,3); // 5
sum(2,3); // 5
// 这个函数是不纯的,因为它修改了外部传进来的参数
let count = 0;
const getResult = (num) => {
count++;
return num*num + count;
}
getResult(2); // 5
getResult(2); // 6
// 所有的react组件都必须遵守的一条规则:
// 对待props就像对待纯函数一样,遵循可以通过输入确定输出
</script>
6.绑定事件
1.事件绑定的函数的this的指向会改变,需要使用bind来绑定函数的指向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props);
// 让函数的this指向class的实例
this.handleClick = this.handleClick.bind(this);
}
handleClick (){
this.getList();
}
getList() {
alert('获取列表数据');
}
render() {
return (
<div>
<button onClick={this.handleClick}>
click
</button>
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('app')
)
</script>
2.事件传参的方式
react可以在{} 里面执行一个函数的调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
super(props);
this.toDetail = this.toDetail.bind(this);
}
toDetail(id) {
console.log(event);
alert(id);
}
render() {
return (
<div>
<ul>
<li> <button onClick={() => {this.toDetail(1001)}}>电影1</button> </li>
<li> <button onClick={() => {this.toDetail(1002)}}>电影2</button> </li>
<li> <button onClick={() => {this.toDetail(1003)}}>电影3</button> </li>
</ul>
</div>
)
}
}
ReactDOM.render(
<Demo />,
document.getElementById('root')
)
</script>
7.列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class List extends React.Component {
constructor(props) {
super(props);
}
render() {
let heroList = this.props.heroList;
return (
<ul>
{heroList.map(hero =>{
return (
<li key={hero.id}>
{hero.heroName} -- {hero.role}
</li>
)
}
)}
</ul>
)
}
}
const heroList = [
{id: 1, heroName: '亚瑟', role: '战士'},
{id: 2, heroName: '牛魔王', role: '战士'},
{id: 3, heroName: '鲁班七号', role: '射手'}
];
ReactDOM.render(
<List heroList={heroList} />,
document.getElementById('root')
);
</script>
8.条件渲染
1.通过 if 来控制渲染内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
// 使用if else判断变量isLogin的值来决定显示什么内容
if (this.props.isLogin) {
return (
<h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>
)
} else {
return (
<h1>你还没登录, <button style={{color: 'red'}}>请登录</button></h1>
)
}
}
}
ReactDOM.render(
<Welcome isLogin={false}/>,
document.getElementById('app')
)
</script>
2.通过三目运算符来判断
使用三目运算符判断变量isLogin的值来决定显示什么内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
/**
* 通过变量isLogin来决定显示什么内容
* 使用三目运算符(内容较短用三目运算符)
* 再长一点用上面if else的方式
* 更长的内容封装成一个组件更合适
*/
return (
this.props.isLogin?
<h1>欢迎回来, <button style={{color: 'blue'}}>退出登录</button></h1>:
<h1>你还没登录, <button style={{color: 'red'}}>请登录</button></h1>
)
}
}
ReactDOM.render(
<Welcome isLogin={true}/>,
document.getElementById('app')
)
</script>
3.通过与运算符 && 进行控制
相当于if没有else的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
/**
* 如果值为true就显示,为false不显示,相当于vue的v-show
*/
return (
this.props.show &&
<p>
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram
的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
</p>
)
}
}
ReactDOM.render(
<Welcome show={true}/>,
document.getElementById('app')
)
</script>
9.this.state和this.setState
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
<script type="text/babel">
class Welcome extends React.Component {
constructor(props) {
super(props);
// state的初始值
this.state = {
show: true
}
this.toggleMsg = this.toggleMsg.bind(this);
}
toggleMsg(flag) {
// 修改state里show的值
this.setState({
show: flag
})
}
render() {
return (
<div>
<button onClick={()=> {this.toggleMsg(true)}}>显示</button>
<button onClick={()=> {this.toggleMsg(false)}}>隐藏</button>
<hr />
{this.state.show &&
<p>React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC
框架,都不满意,就决定自己写一套,用来架设 Instagram
的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
</p>
}
</div>
)
}
}
ReactDOM.render(
<Welcome />,
document.getElementById('app')
)
</script>
10.样式和属性
1.class使用className代替
2.style需要用{{}},外面的{}代表这是js代码,里面的{}则是个js对象
3.属性是个变量加上{}即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.green {
color: green;
}
</style>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
let bg = '#999';
let imgUrl = 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1598000148,3084276147&fm=58&s=36F6EC36C8A47E92227DC7C502007026';
ReactDOM.render(
<div>
<p style={{backgroundColor: bg,width: '200px'}}>hello react</p>
<p className="green">我的react</p>
<img src={imgUrl}/>
</div>,
document.getElementById('root')
)
</script>
11.生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
/**
* react的生命周期分成三种
* 1. mount 挂载
* 2. update 更新
* 3. unmount 卸载
*/
class Hello extends React.Component {
componentWillMount() {
console.log('即将挂载');
}
componentDidMount() {
console.log('已挂载');
}
componentWillUpdate(nextProps, nextState) {
console.log('将要更新');
}
componentDidUpdate(prevProps, prevState) {
console.log('更新完毕');
}
// 默认每一次的修改都触发页面更新,此函数用于干预是否要更新,用于性能优化,
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUnmount() {
console.log('将要卸载');
}
render() {
return <div>生命周期</div>
}
}
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('root')
);
</script>
12.表单
1.单个input标签输入,让输入的数据与react数据流同步
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('你输入的用户名是: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<p>
用户名:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</p>
<input type="submit" value="提交" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
)
</script>
2.多个input表单输入
如果有多个input标签输入,我们是否需要为每一个input绑定一个事件呢,会不会太麻烦了,
其实不用,我们可以像下面这样来处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
username: 'huruqing',
password: 123456,
msg: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<div>
<form>
<label>
用户名:
<input
name="username"
type="text"
value={this.state.username}
onChange={this.handleChange} />
</label>
<br />
<label>
密码:
<input
name="password"
type="text"
value={this.state.password}
onChange={this.handleChange} />
</label>
</form>
<p>
你输入的用户名是: {this.state.username} <br/>
你输入的密码是: {this.state.password}
</p>
</div>
);
}
}
ReactDOM.render(
<Reservation />,
document.getElementById('root')
)
</script>
13.获取真实的DOM节点
通过ref可以获取真实dom节点,需要确保节点已经挂载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.refs.myTextInput.focus();
}
render() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="获取焦点" onClick={this.handleClick} />
</div>
)
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
</script>
14.this.props.children
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script type="text/babel">
class NotesList extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
}
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
</script>
参考:
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React中文文档 https://react.docschina.org/docs/hello-world.html