小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文同时参与掘力星计划，赢取创作大礼包，挑战创作激励金
代码仓库
课程大纲
React视图层
项目创建
npx create-react-app my-app #创建项目
npm start #启动项目
这样React项目创建好啦！
JSX
JSX 是React引入的基于JS的扩展语法，用JSX语法描述UI的结构。
JSX中的标签有两种类型，一种是HTML标签，一种是React组件标签。
如何将 React 元素渲染到DOM中？
const element = <h1>hello,world</h1>;
ReactDOM.render(element,document.getElementById('root'));
组件
React组件是在React元素之上的封装，是React应用组成和复用的基本单元。
component = (props) => element
React 组件必须像纯函数一样运行！
函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类组件
class Welcome extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>;
}
}
列表中的key
-
只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。
-
理想情况下，key 应该从数据中获取，对应着唯一且固定的标识符，例如 post.id。
State
State的出现是为了在组件内部动态的渲染UI结构。State可以使React组件具有动态性
SetState注意事项
- 更改state要通过setState方法实现
// Wrong
this.state.comment = 'hello'; //不能通过 this.state 直接赋值
// Correct
this.setState({comment:'Hello'}); //使用 this.setState 方法赋值
- 传入参数问题
// Wrong
this.state.setState({
counter: this.state.counter + this.props.increment
});
// Correct
this.state.setState((state,props)=> ({
counter: state.counter + props.increment
}));
-
Psops: 父组件传递给子组件的属性，在子组件内部只读。
-
State: 组件内部自己维护的状态，可以被修改。
Form
受控组件
非受控组件
组件的组合用法
更加灵活的组合方式
Hooks
React 16.8 以后，出现了新的组件开发方式
使用hooks要遵守的规则
规则1
- 只能在函数组件、自定义hook中调用hook
规则2
-
只能在函数的最顶层控制流中调用hook
为什么要出现hooks?
-
使用Hook可以让我们对组件状态管理逻辑进行复用
-
面向React的未来
React Router 路由层
路由分类
服务端路由
请求发送到服务端，服务端决定返回对应的页面内容。
客户端路由
请求不发送到服务端，由客户端代码更新页面内容。
示例：juejin.cn/
路由分类
两种路由的应用场景，左边是多页面应用，右边是单页面应用。
React Router是什么
React 应用中的客户端路由解决方案
基础示例
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/user/:username">
<User />
</Route>
</Switch>
</div>
</Router>
);
}
Route
-
BrowserRouter：根据URL中的path做路由跳转
-
HashRouter：根据URL中的hash部分做路由跳转 示例
-
当URL和Route中定义的path匹配时，渲染对应的组件
-
重要props: path、exact 示例
Switch
- 当找到Switch组件内的第一个路由规则匹配的Route组件后，立即停止后续的查找 示例
路由跳转
-
声明式的组件方式：Link
-
命令式的API调用方式：history.push
Hooks
-
UseHistory：获取history对象
-
useParams：获取路由中的参数 示例
集成React Router
在实战案例中，集成React Router
结语
如以上有错误的地方，请在评论区中指出，谢谢！
小可爱们看完点个赞再走一走~~
