react（一）-白红宇

react（一）

阅读量：3934 次

发布时间：2019-05-23

本文共 3482 字，大约阅读时间需要 11 分钟。

起步

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 setupconst useTypeScript = fs.existsSync(paths.appTsConfig)//style files regexesconst 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(
   
    hello
   )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 = 
   
    {
   name}

函数也是合法表达式

const user = {
   	firstName: "tom",	lastName: "jerry"}function formatName(user){
   	return user.firstName + "  " + user.lastName}const jsx = {
    formatName(user) }

JSX也是js的对象

const a= helloconst jsx = 
   
    {
   a}

条件语句

const title = name ? {
   name}
:null

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

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

组件的两种形式

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通常是异步的，因此需要获取到最新状态值有一下三种方式吧

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

//使用定时器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 
   
    {
   date.toString()}
   
}

事件回调函数注意绑定this的指向，常见三种方法

1 构造函数中绑定并覆盖