ARTS第六周

Algorithm

// 原题https://leetcode.com/problems/valid-parentheses/description
/**
	给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。

  有效字符串需满足：

  左括号必须用相同类型的右括号闭合。
  左括号必须以正确的顺序闭合。
  注意空字符串可被认为是有效字符串。
  
  
  Example 1:

  Input: "()"
  Output: true

  Input: "()[]{}"
  Output: true

  Input: "(]"
  Output: false

  Input: "([)]"
  Output: false

  Input: "{[]}"
  Output: true
  
  这个题可以用栈来解决，其实这个东西如果在复杂一点，就是html解析的过程，
  遍历输入的字符串，如果当前字符为左半边括号时，则将其压入栈中，
  当遇到右边括号的时候，栈为空或者不匹配的时候，就是false，否则继续循环
*/
/**
 * @param {string} s
 * @return {boolean}
*/
export default function isValid (s) {
  let valid = true;
  const stack = [];
  const mapper = {
    '{':'}',
    '[':']',
    '(':')'
  }
  for(let i in s) {
    const v = s[i]
    if(['[','(','{'].indexOf(v) > -1) {
      stack.push(v)
    } else {
      const peek = stack.pop()
      if(v !== mapper[peek]){
        return false
      }
    }
    
    if(stack.lennth > 0) return false
    
    return valid;
  }
}

review

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

在HTML中，标签、、的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。广义就是说，组件本身自己控制组件，

class InputDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: ''};
        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleChange(event) {
        this.setState({ name: event.target.value });
    };

    render() {
        return (
            <div>
                <input type="text" value={this.state.name} onChange={this.handleChange}/>
            </div>
        );
    }
}

表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）广义上就是说，组件本身不控制状态，由用户自己控制。

特征	非受控制	受控
一次性检索（例如表单提交）	yes	yes
及时验证	no	yes
有条件的禁用提交按钮	no	yes
执行输入格式	no	yes
一个数据的几个输入	no	yes
动态输入	no	yes

tip

一个ES7的小语法知识，

求幂运算符（**）

一个很简单的语法糖替代Math.pow

Math.pow(2,3)等同于2 ** 3

share

分享一个库，https://github.com/localForage/localForage

对不同浏览器 使用不同的缓存策略 , 大大提高了性能 ,IndexedDB，WebSQL 和 localStorage 三种存储模式。

• 支持回调的异步 API；
• 支持 IndexedDB，WebSQL 和 localStorage 三种存储模式（自动为你加载最佳的驱动程序）；
• 支持 BLOB 和任意类型的数据，让您可以存储图片，文件等等。
• 支持 ES6 Promises；

对 IndexedDB 和 WebSQL 的支持使您可以为你的 Web应用程序存储更多的数据，要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快，不会因为 Get/Set 调用而挂起主线程。