React学习
官网：
https://reactjs.org/
https://zh-hans.reactjs.org/
https://beta.reactjs.org/
3 简介
- 声明式UI。简答，命名式类似于函数。
- 组件化
- 夸平台支持比较好
4 基础环境搭建
- 先安装nodejs https://nodejs.org/en
- 再下载一个简单的react项目 npx create-react-app react-basic
5 目录
核心包
"react": "^18.2.0",
"react-dom": "^18.2.0",
7 jsx 基础
写前端，先写html。javascript xml。比较简单，又能有js的功能。
融合了 js 和 html 的语法。
机器编译成了 js格式。
8 jsx 表达式使用
{js表达式}
const name = 'ni hao'
<h1>{name}</h1>
9 jsx 列表渲染
const songs = [ {id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'}, ] function App() { return ( <div className="App"> <ul> {songs.map(song => <li key={song.id}>{song.name}</li>)} </ul> </div> ); } export default App;
10 条件渲染
三元表达式（常用）
const flag = true function App() { return ( <div className="App"> {flag ? <span>WN</span> : null} </div> ); } export default App;
条件运算
const flag = true function App() { return ( <div className="App"> {true && <div> no </div>} </div> ); } export default App;
11 jsp 模板精简原则
模板中逻辑尽量精简。
复杂多分枝逻辑 收敛为一个函数 通过一个函数来写分枝逻辑 模板中负责调用
const getHtag = (x) => { if (x === 1) return <h1> x1</h1> else return <h1>x else</h1> } function App() { return ( <div className="App"> {getHtag(1)} </div> ); } export default App;
12 JSP 样式控制
1）行内样式
在元素身上绑定一个style 属性即可
const style = { color: 'blue', fontSize: '30px' } function App() { return ( <div className="App"> <span style={style}>this is span</span> </div> ); } export default App;
2）类名样式 (常用）
在元素身上绑定一个 className
import './app.css' function App() { return ( <div className="App"> <span className='active'>this is span</span> </div> ); } export default App;
13 jsx 动态类名
import './app.css' const flag = true function App() { return ( <div className="App"> <span className={flag ? 'active' : ''}>this is span</span> </div> ); } export default App;
14 jsx 注意事项
- jsx必须要有个根节点。
- 所有标签必须闭合
- jsx语法更贴近js
- jsx支持换行，需使用()包裹，防止bug
15 开发工具和格式化代码
安装插件。
17 组件
把小功能抽离，再组装。
18 函数组件的创建和渲染
function Hello() { return <div>hello</div> } function App() { return ( <div className="App"> <Hello></Hello> </div> ); } export default App;
- 组件名称必须大写
- 函数组件必须要有返回值
19 类组件的创建和渲染
import React from "react"; class HelloComponent extends React.Component { render() { return <div>This is from a class</div> } } function App() { return ( <div className="App"> <HelloComponent></HelloComponent> </div> ); } export default App;
用法和函数组件差不多，必须 extends React.Component
20 事件绑定
on + 事件名称 = {事件处理程序}
import React from "react";
function Hello() {
const clickHandler = () => {
console.log('click handler')
}
return <div onClick={clickHandler}>Hello</div>
}
class HelloComponent extends React.Component {
//标准写法
clickHandler = () => {
console.log('click handler')
}
render() {
return <div onClick={this.clickHandler}>This is from a class</div>
}
}
function App() {
return (
<div className="App">
<Hello/>
<HelloComponent/>
</div>
);
}
export default App;
function Hello() {
const clickHandler = () => {
console.log('click handler')
}
return <div onClick={clickHandler}>Hello</div>
}
class HelloComponent extends React.Component {
//标准写法
clickHandler = () => {
console.log('click handler')
}
render() {
return <div onClick={this.clickHandler}>This is from a class</div>
}
}
function App() {
return (
<div className="App">
<Hello/>
<HelloComponent/>
</div>
);
}
export default App;
21 事件对象e
import React from "react"; class HelloComponent extends React.Component { //标准写法 clickHandler = (e) => { e.preventDefault() console.log('click handler') } render() { return <div><a onClick={this.clickHandler} href="https://www.baidu.com">百度</a></div> } } function App() { return ( <div className="App"> <HelloComponent/> </div> ); } export default App;
22 组件-事件绑定额外参数
加入事件参数e，如果不加入则删除
import React from "react";
class HelloComponent extends React.Component {
//标准写法
clickHandler = (e, msg) => {
console.log('click handler', e, msg)
}
render() {
return <div onClick={(e) => this.clickHandler(e, 'msg param')}>Hello </div>
}
}
function App() {
return (
<div className="App">
<HelloComponent/>
</div>
);
}
export default App;
class HelloComponent extends React.Component {
//标准写法
clickHandler = (e, msg) => {
console.log('click handler', e, msg)
}
render() {
return <div onClick={(e) => this.clickHandler(e, 'msg param')}>Hello </div>
}
}
function App() {
return (
<div className="App">
<HelloComponent/>
</div>
);
}
export default App;
23 组件状态
类组件状态：使用state，如果要修改使用setState
24 this 指向问题说明
在类中无法使用this，如果非要使用，使用bind绑定
或者使用箭头函数
29 组件不可变状态说明
- 数字可以直接+1
- 数组，拿原值，再操作
- 对象同上
30 受控组件
input状态被React组件状态控制
- 在组件的state声明一个组件状态数据
- 将状态数据设置成input标签元素的value属性的值
- 为input添加change事件
- 通过e获取input的值
- 调用setState更改值
31 tab切换实现
使用state状态记录一个值
37 组件通信
各组件数据交互就是组件通信
父子关系。最重要
38 父传子
- 父组件提供数据state
- 给自组件中添加数据的值为state中的值
- 子组件通过props接受父组件的值 （类中使用 this.props 获取 props， 函数中用 props
39 父传子 props说明
props是单向传递，只读
props可以传递任何数据
40 props的解构
就是参数分开写
class 组件自身的问题
44 跨组件通信context
用provider 和consumer
60 hook
组件状态逻辑复用问题
class 问题
谢谢！
