react

Posted 2021-05-16 Jay_帅小伙

起步
1.安装官方脚手架 npm i -g create-react-app
2.创建项目. create-react-app lesson1
3. 启动项目 npm start
4. 暴露配置 npm run eject
文件结构

-------readme.md
-------public
       --favicon.ico
       --index.html
       --manifest.json
-------src
       --app.js
       --app.css
       --index.css
       --index.js
-------package.json

env.js用来处理.env文件中配置的环境变量

//node的运行环境： development。production test 等
const NODE_ENV = process.env.NODE_ENV

//要扫描的文件数组
var dotenvFiles = [
	`${paths.dotenv}.${NODE_ENV}.local`,//.env.development.local
	`${paths.dotenv.${NODE_ENV}}`,//.env.devalopment
	NODE_ENV !== 'test' && `${paths.dotenv}.local`, //.env.local
	paths.dotenv, //.env
].filter(Boolean)

//从.env*文件加载环境变量
dotenvFiles.forEach(dotenvFile=>{
	if(fs.existsSync(dotenvFile)){
		require('dotenv-expand')(
			require(dotenv).config(
				path: dotenvFile
			)
		)
	}
})

实践一下，修改默认端口，创建.env文件

PORT=8080

webpack.config.js是webpack的配置文件，开头的常量声明可以看出cra可以支持ts sass css模块化

//check if typescript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig)

//style files regexes
const cssRegex = /\\.css$/
const cssModuleRegex = /\\.module\\.css$/
const sassRegex = /\\.sass|scss$/
const sassModuleRegex = /\\.module\\.(sass|scss)$/

React和ReactDom
删除src下面所有代码，新建index.js

import React from 'react'
import React from 'react-dom'

//这里没有用到React
//JSX =》 React.createElement(...)
ReactDOM.render(<h>hello</h>)
document.querySelector('#root')

react负责逻辑的控制
reactDom渲染实际的dom， vdom=》dom
react使用JSX来描述ui
入口文件奥定义 webpack.config.js

entry: [
	//webpackDevServer客户端，他实现开发时热更新功能
	isEnvDevelopment &&
	require.resolve('react-dev-utiles/webpackHotDevClient'),
	//应用程序的入口 src/index
	paths.appIndexJs
].filter(Boolean)

表达式的用法{}

const name = 'jay'
const jsx = <h>{name}</h>

函数也是合法表达式

const user = {
	firstName: "tom",
	lastName: "jerry"
}

function formatName(user){
	return user.firstName + "  " + user.lastName
}
const jsx = <h2>{ formatName(user) }</h2>

JSX也是js的对象

const a= <a>hello</a>
const jsx = <div>{a}</div>

条件语句

const title = name ? <h2>{name}</h2>:null

数组会被作为一组子元素对待，数组中存放一组jsx可用于显示列表数据

const arr = [1,2].map(n=><li>{n}</li>)
const jsx = <div>{arr}</div>

组件的两种形式
function组件。class组件

类组件的状态管理
state

class Com extends React.Component{
	constructor(props){
		super(props)
		this.state = {
		data: 12
		}
	}
}

setState特性
使用setState更新状态，不能直接修改

//错误
this.state.data = 3

setState是批量执行的，因此对同一个状态执行多次只起一次作用，多个状态更新可以放在同一个setState里面进行

componentDidmount(){
	this.setState({ count: this.state.counter + 1 })
	this.setState({ count: this.state.counter + 1 })
	this.setState({ count: this.state.counter + 1 })
}

setState通常是异步的，因此需要获取到最新状态值有一下三种方式吧
1

//传递函数给setState
this.setState((nextState, props)=>({ counter: state.counter+1 }))

2

//使用定时器
setTimeout(()=>{
	this.changeValue()
	console.log(this.state.counter)
}, 0)

原生事件中修改

在这里插入代码片
document.body.addEventListener('click', this.changeValue, false)

changeValue = ()=>{
this.setStae({.counter: this.state.counter+1 })
console.log(this.state.counter)
}

**
setState只有在合成事件和钩子函数中是异步的，在原生事件和setTimeout，setInterval中都是异步的
**

函数组件中的状态管理

import React, { useState, useEffect } from 'react'

export defaule function User(){
	const [date, setDate] = useState(new date())
	useEffect(()=>{
		const timeId = setInterval(()=>{setDate(new date())}, 1000)
		return ()=>clearInterval(timeId)
	})
	return <div>{date.toString()}</div>
}

事件回调函数注意绑定this的指向，常见三种方法
1 构造函数中绑定并覆盖

this.change = this.change.bind(this)

2方法定义为箭头函数
3事件中定义为箭头函数onChange={()=>{}}

react里遵循单项数据流，没有双向绑定，输入框要设置value 和 onChange事件成为受控组件