ARTS打卡【一】题目：字符串压缩。利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabc

Algorithm

来源：力扣

题目：字符串压缩。利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为a2b1c5a3。若“压缩”后的字符串没有变短，则返回原先的字符串。你可以假设字符串中只包含大小写英文字母（a至z）。

示例1:

输入："aabcccccaaa" 输出："a2b1c5a3"

示例2:

输入："abbccd" 输出："abbccd"

解释："abbccd"压缩后为"a1b2c2d1"，比原字符串长度更长。

Review

3 Rules of React State Management

状态管理的三条规则

单一责任原则/One concern

// Good 
const [on, setOnOff] = useState(true);
const [count, setCount] = useState(0);

// bad
const [state, setState] = useState({
  on: true,
  count: 0
});

将复杂的逻辑提取到自定义hook当中/Extract complex state logic

组件不再包含状态的详细
自定义hook可以复用
便于独立单元测试

// bad 
function ProductsList() {
  const [names, setNames] = useState([]);
  const [newName, setNewName] = useState('');

  const map = name => <div>{name}</div>;

  const handleChange = event => setNewName(event.target.value);
  const handleAdd = () => {
    const s = new Set([...names, newName]);
    setNames([...s]);
  };

  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

// Good
// 先把去重定义为一个hook useUnique
export function useUnique(initial) {
  const [items, setItems] = useState(initial);
  const add = newItem => {
    const uniqueItems = [...new Set([...items, newItem])];
    setItems(uniqueItems);
  };
  return [items, add];
};

// 引用去重
import { useUnique } from './useUnique';

function ProductsList() {
  const [names, add] = useUnique([]);
  const [newName, setNewName] = useState('');

  const map = name => <div>{name}</div>;

  const handleChange = event => setNewName(e.target.value);
  const handleAdd = () => add(newName);

  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

3.把多个类似的处理state的方法封装起来/Extract multiple state operations

// Good
function uniqueReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...new Set([...state, action.name])];
    case 'delete':
      return state.filter(name => name === action.name);
    default:
      throw new Error();
  }
}

// ues example
function ProductsList() {
  const [names, dispatch] = useReducer(uniqueReducer, []);
  const [newName, setNewName] = useState('');
  const handleChange = event => setNewName(event.target.value);
  const handleAdd = () => dispatch({ type: 'add', name: newName });
  const map = name => {
    const delete = () => dispatch({ type: 'delete', name });
    return (
      <div>
        {name}
        <button onClick={delete}>Delete</button>
      </div>
    );
  }

  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

Tip

Flutter Dart Widget 等概念性东西

最近在读的书你不知道的Javascript 上册，微信阅读需要会员或者分享好友赚会员资格

ARTS打卡【一】

Algorithm

Review

Tip

Share