2024年最新React_Flux入门实例_flux example(1)，总结2024年180道前端岗面试题

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

onClick={this.createNewItem}
/>;
}
});

module.exports = MyButtonController;

上面代码中，MyButtonController将参数传给子组件MyButton。后者的源码甚至更简单。

// components/MyButton.jsx
var React = require(‘react’);

var MyButton = function(props) {
return

New Item

; };

module.exports = MyButton;

上面代码中，你可以看到MyButton是一个纯组件（即不含有任何状态），从而方便了测试和复用。这就是”controll view”模式的最大优点。   
 MyButton只有一个逻辑，就是一旦用户点击，就调用`this.createNewItem` 方法，向Dispatcher发出一个Action。

// components/MyButtonController.jsx

// …
createNewItem: function (event) {
ButtonActions.addNewItem(‘new item’);
}

上面代码中，调用`createNewItem`方法，会触发名为`addNewItem`的Action。


### 五、Action


每个Action都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）。   
 在这个Demo里面，ButtonActions 对象用于存放所有的Action。

// actions/ButtonActions.js
var AppDispatcher = require(‘…/dispatcher/AppDispatcher’);

var ButtonActions = {
addNewItem: function (text) {
AppDispatcher.dispatch({
actionType: ‘ADD_NEW_ITEM’,
text: text
});
},
};

上面代码中，ButtonActions.addNewItem方法使用AppDispatcher，把动作`ADD_NEW_ITEM`派发到Store。


### 六、Dispatcher


Dispatcher 的作用是将 Action 派发到 Store。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。**注意，Dispatcher 只能有一个，而且是全局的。**   
 Facebook官方的 Dispatcher 实现输出一个类，你要写一个`AppDispatcher.js`，生成 Dispatcher 实例。


`AppDispatcher.register()`方法用来登记各种Action的回调函数。

var Dispatcher = require(‘flux’).Dispatcher;
var AppDispatcher = new Dispatcher();
var ListStore = require(‘…/stores/ListStore’);

function _handleActions(action){
switch(action.actionType) {
case ‘ADD_NEW_ITEM’: //对应的action操作Store中对应的数据
ListStore.addNewItemHandler(action.text);
ListStore.emitChange();
break;
default:
// no op
}
}
//登记各种Action的回调函数，Dispatcher 只用来派发 Action，不应该有其他逻辑。
ListStore.dispatchToken = AppDispatcher.register(_handleActions);

module.exports = AppDispatcher;

上面代码中，Dispatcher收到`ADD_NEW_ITEM`动作，就会执行回调函数，对ListStore进行操作。   
 记住，Dispatcher 只用来派发 Action，不应该有其他逻辑。


### 七、Store


Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。   
 在我们的 Demo 中，有一个ListStore，所有数据都存放在那里。

// stores/ListStore.js
var ListStore = {
items: [],

getAll: function() {
return this.items;
},

addNewItemHandler: function (text) {
this.items.push(text);
},

emitChange: function () {
this.emit(‘change’);
}
};

module.exports = ListStore;

上面代码中，`ListStore.items`用来保存条目，`ListStore.getAll()`用来读取所有条目，`ListStore.emitChange()`用来发出一个”`change`“事件。   
 由于 Store 需要在变动后向 View 发送”`change`“事件，因此它必须实现事件接口。

// stores/ListStore.js
var EventEmitter = require(‘events’).EventEmitter;
var assign = require(‘object-assign’);

var ListStore = assign({}, EventEmitter.prototype, {
items: [],

getAll: function () {
return this.items;
},

addNewItemHandler: function (text) {
this.items.push(text);
},

emitChange: function () {
this.emit(‘change’);
},

addChangeListener: function(callback) {
this.on(‘change’, callback);
},

removeChangeListener: function(callback) {
this.removeListener(‘change’, callback);
}
});

上面代码中，ListStore继承了`EventEmitter.prototype`，因此就能使用`ListStore.on()`和`ListStore.emit()`，来监听和触发事件了。   
 Store 更新后（`this.addNewItemHandler()`）发出事件（`this.emitChange()`），表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。


### 八、View （第二部分）


现在，我们再回过头来修改 View ，让它监听 Store 的 change 事件。

// components/MyButtonController.jsx
var React = require(‘react’);
var ListStore = require(‘…/stores/ListStore’);
var ButtonActions = require(‘…/actions/ButtonActions’);
var MyButton = require(‘./MyButton’);

var MyButtonController = React.createClass({
getInitialState: function () {
return {
items: ListStore.getAll()
};
},

componentDidMount: function() {
ListStore.addChangeListener(this._onChange);
},

componentWillUnmount: function() {
ListStore.removeChangeListener(this._onChange);
},

_onChange: function () {
this.setState({
items: ListStore.getAll()
});
},

createNewItem: function (event) {
ButtonActions.addNewItem(‘new item’);
},

render: function() {
return ;
}
});

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this.\_onChange 更新组件状态，从而触发重新渲染。

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题