开始
安装react脚手架并初始化项目
cnpm install -g create-react-app
create-react-app electron-react-today
cd electron-react-today
npm start此时项目已经运行在 ：localhost:3000
安装 electron
electron 7.0.0 实在太坑爹了
使用6.1.2没有问题。
cnpm install --save-dev [email protected] --verbose新建main.js
// 引入electron并创建一个Browserwindow
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow
function createWindow () {
//创建浏览器窗口,宽高自定义具体大小你开心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
/*
* 加载应用----- electron-quick-start中默认的加载入口
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
*/
// 加载应用----适用于 react 项目
mainWindow.loadURL('http://localhost:3000/')
// 加载本地html
// mainWindow.loadFile('./index.html')
// 打开开发者工具，默认不打开
mainWindow.webContents.openDevTools()
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
if (mainWindow === null) {
createWindow()
}
})启动项目
在package.json文件中添加：
{
"main": "main.js",
"scripts": {
"electron-start": "electron ."
},
}然后执行：
npm run electron-start看到如下页面，终于第一步完成了。
React Hooks
-
useState声明状态变量
const [ count , setCount ] = useState(0); -
useEffect代替常用生命周期函数
// 第一次渲染和每次更新都会被执行 并且是异步执行的 useEffect(()=>{ console.log(`useEffect=>You clicked ${count} times`) }) // 当传空数组[]时，就是当组件将被销毁时才进行解绑， // 这也就实现了componentWillUnmount的生命周期函数 useEffect(()=>{ console.log('useEffect=>老弟你来了！Index页面') return ()=>{ console.log('老弟，你走了!Index页面') } },[]) -
useContext 实现数据共享（父子组件传值）
可以通过这个
hook传递useReducer产生的dispatch函数。也就是不直接传递数据，而是传递修改数据的方法，在根组件中通过
reducer修改状态。父组件
import React, { useState, createContext } from 'react'; import { Button } from '@material-ui/core'; // 引入子组件 import Num from './Num'; // 创建上下文对象 const CounterContext = createContext(); export default function Counter() { const [count, setCount] = useState(0); return (); } // 导出上下文对象 export { CounterContext };点击了 {count} 次
子组件
import React, { useContext } from 'react'; // 引入父组件的上下文 import { CounterContext } from './Counter'; export default function Count() { const count = useContext(CounterContext); return{count}
} -
useReducer 实现对复杂状态对象的管理
使用场景
对某个state有很多种操作
子组件需要修改上层组件的值，可以传递一个dispatch函数
const reducer = (state, action) => { switch(action.type) { case: "xx": .... } } const [state, dispatch] = useReducer(/*reducer函数*/ reducer, /*初始值*/ initialVal); dispatch({ type: 'xx', val: '' });
当然还有其他的Hooks，例如用于性能优化的useMemo就不说了。
ToDoList 应用
有了以上内容就可以开发一个简单的TODoList应用了。
使用到的内容：material-ui 和 上文中的React Hooks 。
至于如何安装组件库可以自行查看：https://material-ui.com/zh/ge...
整体目录结构如下图：
App.js 文件： 承载状态数据和组件。
import React, { useReducer, createContext } from 'react';
import { initialTodos, filterReducer, todosReducer } from './reducer/index';
import Filter from './components/Filter';
import AddTodo from './components/AddTodo';
import TodoList from './components/TodoList';
// 导出共享对象
export const AppContext = createContext();
function App() {
const [todos, dispatchTodos] = useReducer(todosReducer, initialTodos);
const [filterVal, dispatchFilter] = useReducer(filterReducer, 'ALL');
return (
);
}
export default App;/reducer/index.js 文件: 完成对数据的修改。
import uuid from 'uuid';
export const initialTodos = [
{
id: uuid(),
label: '学习React Hooks',
complete: false,
}, {
id: uuid(),
label: '吃饭睡觉',
complete: true,
}
];
export const filterReducer = (state, action) => {
switch (action.type) {
case 'SHOW_ALL':
return 'ALL';
case 'SHOW_COMPLETE':
return 'COMPLETE';
case 'SHOW_INCOMPLETE':
return 'INCOMPLETE';
default:
throw Error();
}
}
export const todosReducer = (state, action) => {
switch (action.type) {
case 'CHECK_TODO':
return state.map(todo => {
if (todo.id === action.id) {
todo.complete = !todo.complete
}
return todo;
});
case 'DELETE_TODO':
console.log(state, action.id)
return state.filter(todo => todo.id !== action.id);
case 'ADD_TODO':
return state.concat(action.todo);
default:
throw Error();
}
}/components/AddTodo.js： 输入框，添加任务。
import React, { useState, useContext } from 'react';
import { Input, Button } from '@material-ui/core';
import uuid from 'uuid';
import { AppContext } from '../App';
export default function AddTodo() {
const dispatch = useContext(AppContext);
const handleSubmit = () => {
if (!task) return;
setTask('');
dispatch({ type: 'ADD_TODO', todo: { id: uuid(), label: task, complete: false } });
}
const [task, setTask] = useState('');
return (
setTask(e.target.value)}
inputProps={{ 'aria-label': 'description' }}
/>
)
}/components/Filter.js： 筛选任务。
import React from 'react';
import { Button } from '@material-ui/core';
export default function Filter({ dispatch }) {
return (
)
}/components/TodoList.js： 展示所有的任务。
import React, { useContext } from 'react';
import { List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Checkbox, ListItemIcon } from '@material-ui/core';
import { Delete as DeleteIcon } from '@material-ui/icons';
import { AppContext } from '../App'
export default function TodoList({ todos, filterVal }) {
const dispatch = useContext(AppContext);
const deleteTodo = (item) => {
dispatch({ type: 'DELETE_TODO', id: item.id });
}
const checkTodo = (item) => {
dispatch({ type: 'CHECK_TODO', id: item.id });
}
// 过滤 todos
const filteredTodos = () => {
if (filterVal === 'ALL') return todos;
if (filterVal === 'COMPLETE') {
return todos.filter(todo => todo.complete);
}
if (filterVal === 'INCOMPLETE') {
return todos.filter(todo => !todo.complete);
}
return [];
}
return (
{
filteredTodos().map(item => (
checkTodo(item)}
disableRipple
/>
deleteTodo(item)} edge="end" aria-label="delete">
))
}
)
}至此，一个简单的ToDoList就完成了。