# react 必知必会
1. 函数式组件(简单无状态场景) / class类式组件 (复杂有状态场景)
2. react思想:状态驱动UI
3. 组件实例三大核心:refs/props/state
4. class = function + hooks
5. this.state = {isHot:true}
const isHot = this.state
# 1. hello world
<div id="example"></div>
<script type="text/babel">
const vdom= <h1>Hello, world!</h1>;
ReactDOM.render(vdom,document.getElementById('example'));
</script>
# 2. 函数式组件
# 3. 类组件
# 4. 函数和class组合场景
# 5. state 和 props
(我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上)
(https://www.runoob.com/react/react-props.html)
# 6. 切换按钮点击事件
(https://www.runoob.com/react/react-event-handle.html)
# 7. 事件传参
(https://www.runoob.com/react/react-event-handle.html)
# 8. 案例演示1
(事件是通过改变status状态来实现的,等同于通过变量param控制UI)
# 9. 表达式和html在{ }中混编
(true && expression 总是返回 expression,而 false && expression 总是返回 false)
# 10. 条件判断:三目运算
# 11. 阻止组件渲染
# 12. 列表渲染
# 13. key值传递
(如果要传递key值,需要借助id)
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
# 14. 生命周期
(结果:
Component WILL MOUNT!
Component DID MOUNT!
Component WILL RECEIVE PROPS!
Component WILL UPDATE!
Component DID UPDATE!
)
# 15. react请求数据更新status状态
# 16. form表单输入框变更监听
# 17. 下拉菜单提交
# 18. 输入框和单选
==============================华丽分割线==================================
# 1. 简洁版写法
# 2. props传递对象写法
# 其他 (复制person对象,并修改/添加name属性,之后合并内容)
let person2 = {...person,name:'cc'}
# 3. class类中限制props属性数据类型
# 注意
props是只读的
# 4. 字符串类型ref
# 5. 回调形式的ref (内联方式)
# 6. createRef (最新写法)
# 7. 表单提交 (非受控组件)
# 8. 表单提交 (受控组件:用到state状态)
# 10. 高阶函数/函数柯里化
# 11. 组件生命周期 (挂载阶段)
# 12. 生命周期
# 12.1. 旧版本 (16.8)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()
# 12.2. 新版本 (17.2)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.getDerivedStateFromProps
3.render()
4.componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()
# 小结
新版本去掉三个生命周期:componentWillMount、componentWillReceiveProps、componentWillUpdate
增加了三个生命周期:getDerivedStateFromProps、getDerivedStateFromProps、getSnapshotBeforeUpdate
# 13. 插件
# 13.1. 前端跨域代理 (正向代理)
# 13.2. 兄弟组件之前传值 (消息订阅与发布机制)
# 13.3. fetch/axios 数据请求 (fetch:关注分离原则)
# 13.4. SPA 单页面,多组件,局部刷新
# 14. react-router
# 概念
# 14.1. 什么是路由
1. 一个路由就是一个映射关系(key:value)
2. key为路径, value可能是function或component
3. function为后端路由,component为前端路由
# 14.2. 路由分类
1. 后端路由:
1) 理解: value是function, 用来处理客户端提交的请求。
2) 注册路由: router.get(path, function(req, res))
3) 工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2. 前端路由:
1) 浏览器端路由,value是component,用于展示页面内容。
2) 注册路由: <Route path="/test" component={Test}>
3) 工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
# 14.3. 前端路由原理
前端路由依靠浏览器的历史记录history实现
# 14.4. react-router分类
1. web端使用 (react-router-dom)
2. native端使用
3. any任何都可以使用
# 14.5. 路由基本使用
1. 场景:点击左侧导航区,展示区内容切换
2. 导航区:<Link to="/xx">Demo</Link>
3. 展示区:<Route path="/xx" component={Demo} />
4. 主程序入口:<APP>最外层包裹一个<BrowserRouter>或<HashRouter>
15. 路由组件与一般组件的区别
# 16. NavLink使用
注意:<NavLink>是<Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数
小结:Navlink为link增加了几个渲染属性 (选中样式)
# 17. 包装自定义组件 (MyNavLink组件)
# 18. switch标签 (当查找到目标路由后立即结束匹配)
# 19. 初始化默认路由选项
# 20. react-route嵌套路由
# 21. 向路由组件传递参数的三种方式
1. params参数
携带参数:<Link to='/demo/test/tom/18'>详情</Link>
声明接收:<Route path='/demo/test/:name/:age' component={Test}/>
接收参数:const {name,age} = this.props.match.params
2. search参数
携带参数:<Link to='/demo/test?name=tom&age=18'>详情</Link>
注册路由(无需声明,正常注册即可):<Route path='/demo/test' component={Test}/>
接受参数:const {search} = this.props.location.search
注意:search是unicode编码,需要借助querystring第三方工具包来解析
3. state参数
携带参数:<Link to={{path='/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明,正常注册即可):<Route path='/demo/test' component={Test}/>
接受参数:const {search} = this.props.location.state
标签:咻咻咻,render,react,state,props,组件,路由 From: https://blog.51cto.com/u_16021118/6140339