我开始学习react-native和redux。在某些区域,由于复杂性,我可以在某些组件中使用 redux 吗?某些组件只是通过组件中的 setState 和 this.state 在react-native中使用本地状态。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {isShowingText: true};
// Toggle the state every second
setInterval(() => {
this.setState(previousState => {
return { isShowingText: !previousState.isShowingText };
});
}, 1000);
}
render() {
let display = this.state.isShowingText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
Run Code Online (Sandbox Code Playgroud) 因此,我相信标题会介绍我的问题。鉴于您要在要使用mapGetters的每个组件中引入新的依赖关系,因此这会给程序包增加膨胀。
这也意味着您的组件现在已专门绑定到Vue,如果要将组件移植到其他框架(如React)上,这还需要解决。
考虑以下两个计算的属性列表:
import { mapGetters} from 'vuex'
computed: {
...mapGetters({
active:'interface/active',
mode:'interface/mode',
views:'interface/views',
}),
}
Run Code Online (Sandbox Code Playgroud)
与
computed: {
active:() { return this.$store.getters['interface/active'],
mode:{ return this.$store.getters['interface/mode']},
views:{ return this.$store.getters['interface/views']},
}
Run Code Online (Sandbox Code Playgroud)
当然,后者有点冗长,但没有什么太糟糕的了。在任何一种情况下,您仍然都以相同的方式获得所有的吸气剂数据。这样做似乎完全是不必要的,因为节省几个字符的好处很小。
前一个示例重207B(201个字符)
而后面的示例权重为207B(201个字符)。
对我来说,这意味着节省类型,几乎没有。但是,我确实承认,前者更具可读性,可移植性,并且最终易于维护,因为您的相关数据全部集中在一个位置。
我正在尝试从 api 获取新闻数据并在主页中显示新闻标题,因为我知道它不会有任何内部更改,所以我决定使用StatelessWidget以及使用PROVIDER状态管理,现在我遇到了麻烦如何使用 StatelessWidget 调用获取方法,以便我可以显示标题
这是我获取数据的类
class NewsRequest with ChangeNotifier{
static String _url ="https://newsapi.org/v2/everything?q=bitcoin&from=2019-06-24&sortBy=publishedAt&apiKey=4d990bdd71324572bca39fe31edc3990";
static Map<String, String> _apiKey = {"apiKey" : "4d990bdd71324572bca39fe31edc3990"};
Map <String, dynamic> _data;
List _articles;
bool _isFetching = false;
Map<String, dynamic> result;
bool get isFetching => _isFetching;
Future<Map<String, dynamic>> fetchData() async{
_isFetching = true;
try{
Response response = await get(Uri.encodeFull(_url), headers: _apiKey)
.timeout(Duration(seconds: 60));
print("STATUSCODE ${response.statusCode}");
if(response.statusCode == 200){
_data = json.decode(response.body);
}
_isFetching = false;
notifyListeners();
}on SocketException catch(_){
}on TimeoutException catch(_){ …
Run Code Online (Sandbox Code Playgroud) 我是新手Flutter
,provider package
所以任何帮助都会很好,所以我有我的main.dart
文件的问题如下:
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
home: ChangeNotifierProvider(
create: (_) => InterestingMomentProvider(),
child: Home(),
),
),
);
Run Code Online (Sandbox Code Playgroud)
这构建了我的Home
小部件,我不会将其全部发布,因为它非常大,但是,发生的情况是我单击一个按钮并将字符串传递给提供程序类并将其添加到列表中,如下所示:
import 'package:flutter/widgets.dart';
class InterestingMomentProvider extends ChangeNotifier {
List<String> _moments = [];
List<String> get moments => _moments;
void addMoment(String time){
_moments.add(time);
}
int momentsTotal(){
return _moments.length;
}
}
Run Code Online (Sandbox Code Playgroud)
在 addMoment 方法上添加断点我可以确认 _moments 具有所有字符串。
然后我按下导航到另一个屏幕的按钮,导航代码如下:
Navigator.push(context, MaterialPageRoute(builder: (context) => MomentsRecorded()),);
Run Code Online (Sandbox Code Playgroud)
MomentsRecorded 小部件如下:
class MomentsRecorded extends StatelessWidget {
@override
Widget build(BuildContext context) …
Run Code Online (Sandbox Code Playgroud) Í 是使用 MERN 堆栈的新手,我刚刚设法从头开始构建了一个电子商务网站,但后来我听说 nextjs 非常适合服务器端渲染,这使我们的 Web 应用程序加载速度更快且 seo 友好,我查看了文档,但我还没有理解我如何在下一个 js 中管理状态......我可以使用 redux,以及如何使用?谢谢
我目前正在按照教程开发一个待办事项应用程序,这是复选框部分
我试图将它的状态提升到树上,但是当我这样做时,无状态小部件只是不停地重建,我尝试添加key,添加const将其转换为有状态,但似乎没有任何作用,它也没有为我提供任何类型的错误或异常消息
注意:当我将onChecked设置为null时,statelessWidget 会运行两次,而它应该只构建一次。
下面是代码:
导入“包:flutter/material.dart”; 类 TaskTile 扩展 StatefulWidget { @覆盖 _TaskTileState createState() => _TaskTileState(); } 类 _TaskTileState 扩展状态 { 布尔 isChecked = false; @覆盖 小部件构建(BuildContext上下文){ 返回列表图块( 标题:文字( “完整的托多伊”, 样式:文本样式( 装饰: isChecked == true ?TextDecoration.lineThrough : TextDecoration.none), ), 尾随:TaskCheckBox( checkBoxState: 已选中, 切换复选框状态: (布尔复选框状态){ Future.delayed(持续时间.0, () 异步 { 设置状态((){ 打印( “==================$isChecked==============$checkBoxState============ ================================================================================================================================================================================ isChecked = checkBoxState; }); }); }), ); } } 类 TaskCheckBox 扩展 StatelessWidget { 常量任务复选框( {钥匙?钥匙, 需要 this.checkBoxState, …
我正在尝试使用 Pinia 来管理我正在构建的 Vue.js 应用程序中的某些全局状态,特别是我想在各种组件和视图之间共享 Socket.io 实例。不过我得到了
this.socketObject.emit is not a function
Run Code Online (Sandbox Code Playgroud)
从 Socket.io 实例调用函数时,当我从创建 Socket.io 实例的组件/视图以外的组件调用函数时,会出现错误。以下是代码的一些摘录。
@/views/ LobbyView.vue(这是我创建 Socket.io 实例并将其传递给 Pinia 存储的位置,我可以在该文件中使用emit Fine,不会出现任何错误)
import io from "socket.io-client";
import { useSocket} from "@/store/index";
...
setup() {
const socketObject = useSocket();
return { socketObject};
},
...
async mounted() {
this.socketObject = await io("http://localhost:8000");
this.socketObject.emit("createNewRoom");
}
Run Code Online (Sandbox Code Playgroud)
@/store/ index.js Pinia商店
import { defineStore } from "pinia";
...
export const useSocket = defineStore({
id: "socket",
state: () => {
return {socketObject: Object};
}, …
Run Code Online (Sandbox Code Playgroud) 我正在学习 Jetpack Compose,但在理解状态方面遇到一些问题。有人可以解释一下这两个吗?观察为状态和收集为状态。谢谢。
考虑以下 zustand 商店:
const useStore = ((set) => ({
property1: 2,
property2: 3,
property3: 6,
//etc.
}))
Run Code Online (Sandbox Code Playgroud)
其中属性 3 是属性 1 和属性 2 的倍数。是否可以将其设置为当 zustand 中的 property1 或 property2 更新时 property3 自动更新?
所以我有一个React网页.
父组件包含所有子组件(下拉列表,单选按钮,表格等).一旦我使用按钮提交所有表单,我希望所有组件状态都返回null.
没有Redux,这可能吗?我知道我最应该在这一点上使用Redux而且我将在接下来的几天内开始学习它,但在跳之前我只想绕开我的脑袋,如果我想做的事情是可能的/不可能的没有React.
只是为了安心和充分理解.
state-management ×10
flutter ×3
redux ×3
android ×2
dart ×2
reactjs ×2
vue.js ×2
javascript ×1
next.js ×1
parent-child ×1
pinia ×1
provider ×1
react-native ×1
socket.io ×1
vuex ×1
zustand ×1