目录
- html模板
- ReactDOM.render()
- JSX 语法
- 组件 & props
- props & 纯函数
- 事件
- 列表渲染
- 条件渲染
- this.state
- style和class
- 生命周期
- 表单
- 获取真实的DOM节点
- this.props.children
一、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/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
// script的类型必须是text/babel
<script type="text/babel">
// todo
</script>
</body>
</html>
二、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>
三、JSX 语法
说明: jsx语法html代码和js代码可以混写而不需要加引号,可以这样做的原因是React和到jsx代码后会进行编译,使代码正确运行.当然jsx也是有它自己本身的规则:
- js代码需要用{}括起来
- 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>
四、组件
- 用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>
- 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>
- 用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>
五、props和纯函数
- 相同的输入有相同的输出,输入可以确定输出,这就是纯函数
- 对待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>
六、绑定事件
- 事件绑定的函数的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>
- 事件传参的方式
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>
七、列表渲染
<!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>
八、条件渲染
- 通过 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>
- 通过三目运算符来判断
使用三目运算符判断变量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>
- 通过与运算符 && 进行控制
相当于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>
九、this.state和this.setState
例1
<!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>
<!-- react框架文件 -->
<script src="lib/react.development.js"></script>
<!-- react用来渲染页面的文件 -->
<script src="lib/react-dom.development.js"></script>
<!-- 用来编译jsx语法的库 -->
<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class Login extends React.Component {
constructor(props) {
super(props);
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.state = {
isLogin: false
}
}
render() {
let { isLogin } = this.state;
return (
<div>
{isLogin?<p>****5539<button onClick={this.logout}>退出登陆</button></p>:<button onClick={this.login}>立即登陆</button>}
</div>
)
}
logout() {
this.setState({
isLogin: false
})
}
login() {
this.setState({
isLogin: true
})
}
}
ReactDOM.render(
<Login/>,
document.getElementById('app')
)
</script>
</body>
</html>
例2
<!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>
十、样式和属性
- class使用className代替
- style需要用{{}},外面的{}代表这是js代码,里面的{}则是个js对象
- 属性是个变量加上{}即可
<!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>
十一、生命周期
<!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>
十二、表单
- 单个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>
- 多个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>
十三、获取真实的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>
十四、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>
demo地址:
参考:
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React中文文档 https://react.docschina.org/docs/hello-world.html