[React框架学习笔记]React入门笔记
React入门笔记
- React环境准备
-
- Node安装使用
-
- 什么是Node？
- Node的作用？
- NPM和Yarn的比较
- React介绍
-
- 特性
- 知识点
-
- 编写HelloWorld
-
- 基本语法
-
- 代码
- 使用npm
- babel语法糖
- JSX介绍
- 元素渲染
- 组件和Props
- React生命周期
- 事件处理
- 条件处理
- 列表渲染
-
- 一维
- 二维
React环境准备
- Node安装使用
- Npm使用
- Yarn使用
Node安装使用
什么是Node？
Node.js是一个基于Chrome V8引擎的JavaScript运行环境
Node的作用？
- 前端开发环境
- Webpack
- NPM插件
- Server
- 服务端动态编程语言
- Java Web
- PHP Web
- Node Web
NPM和Yarn的比较
其实没什么区别，npm里面内置的也是Yarn
Yarn是并发的，前端的包管理器
- 速度快
- 更安全
- 更可靠
React介绍
前端百家争言的局面已经过去了，随着前端的发展，框架开始变为三大主流。
- Vue
- React
- Angular
前两者是MVVM模型，第三者是MVC模型。
个人认为，第三者好景不长…不是针对谁，我是说Angular可能是乐色！
特性
- 声明式
- 组件化
- 灵活
知识点
- 编写HelloWorld
- JSX语法介绍
- 元素渲染
- 组件和props介绍
- React生命周期
- 事件处理
- 条件渲染
- 列表渲染
编写HelloWorld
基本语法
- ReactDOM.render() 渲染元素
- React.createElement() 创建一个元素
- React.Component 创建组件
在html中引入script
<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>
代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>
head>
<body>
<div id="app">div>
<script>
var hello=React.createElement('h1',{},"hello world!")
ReactDOM.render(hello,document.getElementById('app'))
script>
body>
html>
使用npm
npm add react react-dom --save
![[React框架学习笔记]React入门笔记_第1张图片](http://img.e-com-net.com/image/info8/5f4e8bd6ed2b45e4980601a034e0f9e3.jpg)
之后可以引入React/umd/中的react.development.js
来代替原先引入的两条
![[React框架学习笔记]React入门笔记_第2张图片](http://img.e-com-net.com/image/info8/1ad9208270ee49e0bf38d519b443c909.jpg)
渲染成功！
babel语法糖
同学们很激动的东西来了，就是语法糖，怎么说，上面的写法还是太非人类了！
createElement再加进去很麻烦，所以语法糖就来了，有更简便的写法！
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./node_modules/react/umd/react.development.js">script>
<script src="./node_modules/react-dom/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
head>
<body>
<div id="app">div>
<script type="text/babel">
// var hello=React.createElement('h1',{},"hello world!")
ReactDOM.render(
<h1>Hello,world!</h1>
,document.getElementById('app'))
script>
body>
html>
JSX介绍
JS中编写HTML代码
就和上面一样，在render函数里面写了h1标签
还可以用{}传递参数！
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./node_modules/react/umd/react.development.js">script>
<script src="./node_modules/react-dom/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<style>
.red{
color:red
}
style>
head>
<body>
<div id="app">div>
<script type="text/babel">
// var hello=React.createElement('h1',{},"hello world!")
var name='jack'
var ele=<h1 className="red" name="jack">Hello,{name}</h1>
ReactDOM.render(
ele
,document.getElementById('app'))
script>
body>
html>
元素渲染
<div id="app">div>
<script type="text/babel">
function tick(){
var time=new Date().toLocaleTimeString()
var ele= <div>
<h1 className="red" name="jack">Hello,jack</h1>
<h2>{time}</h2>
</div>
ReactDOM.render(
ele
,document.getElementById('app'))
}
setInterval(tick,1000) //只有h2会变化
script>
![[React框架学习笔记]React入门笔记_第3张图片](http://img.e-com-net.com/image/info8/9a493d8f405b4582a1f58cd0c6c343b3.jpg)
组件和Props
React.createClass()已经淘汰了- 函数式组件(无状态组件)
- React.Component
初体验
<div id="app">div>
<script type="text/babel">
function Hello(props){
return <div>
<h1>Hello，{props.name}</h1>
<p>年龄：{props.age}</p>
<p>擅长：JavaScript</p>
</div>
}
ReactDOM.render(
<Hello name="jack" age="30"/>
,document.getElementById("app")
)
script>
我们声明一个带状态的组件
<div id="app">div>
<script type="text/babel">
class HelloJack extends React.Component{
render(){
return <div>
<h1>Hello，{this.props.name}</h1>
<p>年龄：{this.props.age}</p>
<p>擅长：JavaScript</p>
</div>
}
}
ReactDOM.render(
<HelloJack name="jack" age="30"/>
,document.getElementById("app")
)
script>
React生命周期
四个阶段
- 组件初始化阶段
- 组件加载阶段
- 数据更新阶段
- 组件销毁阶段
<div id="app">div>
<script type="text/babel">
class HelloJack extends React.Component{
constructor(props){
console.log('初始化阶段');
// 初始化props
super(props)
// 初始化状态
this.state={
name:'jack',
age:30
}
}
componentWillMount(){
console.log('组件加载前');
}
componentDidMount(){
console.log('组件加载后');
}
updateUser=()=>{
// 错误的语法
// this.state.name='tim'
this.setState({
name:'tim',
age:32
})
}
shouldComponentUpdate(){
console.log('数据是否需要更新');
return true
}
componentWillUpdate(){
console.log('数据将要更新');
}
componentDidUpdate(){
console.log('数据已经更新');
}
render(){
console.log('组件加载或数据更新');
return <div>
<h1>Hello，{this.state.name}</h1>
<p>年龄：{this.state.age}</p>
<p>擅长：JavaScript</p>
<button onClick={this.updateUser}>更新数据</button>
</div>
}
}
ReactDOM.render(
<HelloJack name="tom" age="31"/>
,document.getElementById("app")
)
script>
![[React框架学习笔记]React入门笔记_第4张图片](http://img.e-com-net.com/image/info8/4a7e05a33a2240089fee2c730d920b47.jpg)
![[React框架学习笔记]React入门笔记_第5张图片](http://img.e-com-net.com/image/info8/c5c47b2df0aa4839a50bf600c287b59a.jpg)
事件处理
我们用箭头函数，这样避免刷新this指针，或者在构造函数中，将函数的this指针指向组件的指针，bind，apply，call这些可以完成
条件处理
可以用三元表达式，传参还可以是方法！
<div id="app">div>
<script type="text/babel">
function Login(props){
return <button onClick={props.updateUser}>Login</button>
}
function Logout(props){
return <button onClick={props.updateUser}>Logout</button>
}
class App extends React.Component{
state={
isLogin:false
}
updateUser=()=>{
// 错误的语法
// this.state.name='tim'
this.setState({
isLogin:!this.state.isLogin,
name:"tom"
})
}
render(){
const { isLogin }=this.state// 语法糖
return <div>
<h1>Hello，{this.state.name}</h1>
{isLogin?<Login updateUser={this.updateUser}/>:<Logout updateUser={this.updateUser}/>}
<button onClick={this.updateUser}>更新数据</button>
</div>
}
}
ReactDOM.render(
<App name="tom" age="31"/>
,document.getElementById("app")
)
script>
列表渲染
一维
<div id="app">div>
<script type="text/babel">
class List extends React.Component{
state={
list:[1,2,3,4,5]
}
render(){
const arr=this.state.list
const listItem=[]
arr.map((item)=>{
let li=<li>{item}</li>
listItem.push(li)
})
return <div>
<ul>
{listItem}
</ul>
</div>
}
}
ReactDOM.render(
<List/>
,document.getElementById("app")
)
script>
二维
<div id="app">div>
<script type="text/babel">
class List extends React.Component{
state={
list:[
{id:1,text:'Java'},
{id:2,text:'JS'},
{id:3,text:'Python'},
{id:4,text:'PHP'},
{id:5,text:'Node'}
]
}
render(){
const arr=this.state.list
const listItem=[]
arr.map((item)=>{
let li=<li key={item.id}>{item.text}</li>
listItem.push(li)
})
return <div>
<ul>
{listItem}
</ul>
</div>
}
}
ReactDOM.render(
<List/>
,document.getElementById("app")
)
script>