2024年前端最全ReactNative进阶（八）：connect_react native connect，2024前端常见面试题分享

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

...

// dispatch一个action
this.props.dispatch(reset());

...

const mapStateToProps = state => ({
    timer: state.timer
})

}

export default connect(mapStateToProps)(Home);

或者

import { connect } from ‘react-redux’;
import { bindActionCreators } from ‘redux’;
import * as actions from ‘./actions’;

class Home extends Component {

...

// dispatch一个action
this.props.dispatch.reset();

...

const mapStateToProps = state => ({
    timer: state.timer
})

const mapDispatchToProps = dispatch => ({
  dispatch: bindActionCreators(actions, dispatch)
});

}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

### 二、精简写法


因为`@connect()`是超前的`ES7`写法, 所以需要使用`babel`转码。在`react-native`项目目录下创建`.babelrc`文件, 内容:

{
“presets”: [“react-native”],
“plugins”: [“transform-decorators-legacy”]
}

并在`package.json`中添加插件:

“devDependencies”: {
…
“babel-plugin-transform-decorators-legacy”: “^1.3.4”
}

在组件中使用:

import { connect } from ‘react-redux’;
import { start, stop, reset } from ‘./actions’;

@connect(state => ({ timer: state.timer }))
class Home extends Component {

...

// dispatch一个action
this.props.dispatch(start());

...

}

export default Home;

或者:

import { connect } from ‘react-redux’;

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

(https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-Hsm7uyLI-1714983972768)]
[外链图片转存中…(img-Rt4T40lS-1714983972769)]