day0617
https://note.youdao.com/s/CpjDd769
React
官网reactjs.org
最新版本17.0.2
不像框架，最多算个V
React Native
国内2015年
一、creare-react-app
脚手架
集成了webpack
全局安装create-react-app
$ npm install -g create-react-app
创建一个项目
$ create-react-app your-app 注意命名方式
Creating a new React app in /dir/your-app.
Installing packages. This might take a couple of minutes. 安装过程较慢，
Installing react, react-dom, and react-scripts...
如果不想全局安装，可以直接使用npx
$ npx create-react-app your-app 也可以实现相同的效果
这需要等待一段时间，这个过程实际上会安装三个东西
- react: react的顶级库
- react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
- react-scripts: 包含运行和打包react应用程序的所有脚本及配置
出现下面的界面，表示创建项目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd your-app
npm start
Happy hacking!
根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。
生成项目的目录结构如下：
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public 静态公共目录
└── src 开发用的源代码目录
常见问题：
- npm安装失败
- 切换为npm镜像为淘宝镜像
- 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
- 如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行
npm install命令 - 再不能解决就删除node_modules及package-lock.json的同时清除npm缓存
npm cache clean --force之后再执行npm install命令
二、关于React
1.React的起源和发展
2013年5月开源
2.React与传统MVC的关系
3.React高性能的体现：虚拟DOM
性能比vue高一点点
VScode性能更高？？？
4.React的特点和优势
三、编写第一个react应用程序
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
<h1>欢迎进入React的世界</h1>,
// 渲染到哪里
document.getElementById('root')
)
四、元素与组件
jsx语法直接写return标签
react组件与html元素的区别：
组件首字母大写
只能有一个根元素，引入fragment,可简写为<></>
import React from 'react'
import ReactDOM from 'react-dom'
// 这里感觉又不习惯了？这是在用JSX定义一下react元素
const app = <h1>欢迎进入React的世界</h1>
ReactDOM.render(
app,
document.getElementById('root')
)
1、函数式组件
import React from 'react'
import ReactDOM from 'react-dom'
// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
app({
name: 'react'
}),
document.getElementById('root')
)
import React from 'react'
import ReactDOM from 'react-dom'
const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
ReactDOM.render(
// React组件的调用方式
<App name="react" />,
document.getElementById('root')
)
2、class组件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
// 注意这里得用this.props.name, 必须用this.props
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
ReactDOM.render(
<App name="react" />,
document.getElementById('root')
)
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const app = new App({
name: 'react'
}).render()
ReactDOM.render(
app,
document.getElementById('root')
)
3、更老的一种方法
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
4、组件的组合、嵌套
// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入React的世界</h1>
)
}
}
class Content extends Component {
render () {
return (
<p>React.js是一个构建UI的库</p>
)
}
}
/** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom
class App extends Component {
render () {
return (
<div>
<Title />
<Content />
</div>
)
}
}
**/
// 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
class App extends Component {
render () {
return (
<Fragment>
<Title />
<Content />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
五、JSX原理
语法糖
webpack的babel loader帮助加载编译？？
createElement
React是解析jsx的对象，不引入的话老版本报错
一个花括号写js表达式
立即调用的函数表达式 IIFE
<div class='app' id='appRoot'>
<h1 class='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个帮助你构建页面 UI 的库
</p>
</div>
{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
}
]
}
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<div className='app' id='appRoot'>
<h1 className='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个构建页面 UI 的库
</p>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
React.createElement(
"div",
{
className: 'app',
id: 'appRoot'
},
React.createElement(
"h1",
{ className: 'title' },
"欢迎进入React的世界"
),
React.createElement(
"p",
null,
"React.js 是一个构建页面 UI 的库"
)
)
)
}
}
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
)
React.createElement(
type,
[props],
[...children]
)
六、组件中的DOM元素
写成className
htmlFor
css-in-js
styled-compents
行内样式
// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
<p style{{color:'red',fontSize:'14px'}}>Hello world</p>
使用class
<p className="hello" style = {this.style}>Hello world</p>
不用的条件添加不同的样式
css-in-js
七、组件中数据挂载方式
React手动触发状态更新
写原生js
无状态组件
有状态组件
状态提升
受控组件：
被父组件传入参数，控制
非受控组件
ref加钩子
需要加key
setState
需要返回一个新值，不能是引用类型
监听不到引用类型的变化
1、属性（props）
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
