react-typescript-tuor

2019-07-07

明天去新公司入职了, 可能是这个月的最后一篇博客…

1.react 的typescript入坑

// 在src目录下新建一个 declare_modules.d.ts
declare module 'react-transition-group';
// 用withRouter包裹组件获取props.history
import { withRouter } from 'react-router'
interface RouteComponentProps<P> {
  match: any;
  location: any;
  history: any;
}
// 需要把 match location history手动加上去
class App extends Component<{} & RouteComponentProps<{}>>{
  constructor(props:any){
      super(props);
  }
}  
export default withRouter(App)
// 下面是一个函数式组件的例子
type Props = {
     foo: string,
     header: React.ReactNode // 可能是另一个组件
}
interface RouteComponentProps<P> {
  match: any;
  location: any;
  history: any;
}
const Finance: React.FC<Props & RouteComponentProps<{}>> = ({history, header}) => {
}
// 下面一个类组件的声明
type Props = {
     name: string;
     age: number
}
type State = {
     birthDay: string
}
class Person extends Component<Props, State> {
  state = {
     birthDay: '2019-10-11'
  }
  render(){}
}  
// 一个泛型组件
type SelectProps<T> = { items: T[] };
class Select<T> extends React.Component<SelectProps<T>, any> {}
// 使用
const Form = () => <Select<string> items={['a', 'b']} />

2.目前我也没有找到最好的办法在ts里面扩展prototype 只能用下面这个办法

interface MyArray<T> extends Array<T>{
    remove(o: T): Array<T>;
}
class MyArray<T> extends Array<T> {
    remove(elem: T): Array<T> {
        return this.filter((e:any) => e !== elem);
    }
}
let myArr = new MyArray<any>('some', 2, 3, 4);
myArr.push(7)
console.log(myArr.remove("somej"));

只能重新建一个继承类实现了, 如果能在Array上直接扩展我会分享

3.分享一个非常好用的动画库 react-motion

import { Motion, spring, presets, StaggeredMotion } from 'react-motion'
// 下面展示了 一个div由原始{left: 30, top: 0}  移动到{left: 100, top: 30} 的过程
 <Motion defaultStyle={{left: 30, top: 0}} style={{left: spring(100, presets.wobbly), top:spring(30, presets.gentle)}}>
  {value => <div style={{position:'relative', ...value }}>ff</div>}
</Motion>
// 来解释一下 {stiffness, damping} 这个东西
damping 越大越不抖动
stiffness/damping 越大 spring过程越快
当damping 很小 stiffness变大  抖动越明显
斗不斗是damping 决定的  大了就不斗

4.看下下面的效果

export default class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {x: 250, y: 300};
  };
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('touchmove', this.handleTouchMove);
  };
  handleMouseMove = ({pageX: x, pageY: y}) => {
    this.setState({x, y});
  };
  handleTouchMove = ({touches}) => {
    this.handleMouseMove(touches[0]);
  };
  // 当 i==0 即为第一个 永远跟随者hand move 后面的一个接一个跟上来
  getStyles = (prevStyles) => {
    // `prevStyles` is the interpolated value of the last tick
    const endValue = prevStyles.map((_, i) => {
      return i === 0
        ? this.state
        : {
          x: spring(prevStyles[i - 1].x, presets.gentle),
          y: spring(prevStyles[i - 1].y, presets.gentle),
        };
    });
    return endValue;
  };
  render() {
    return (
      <StaggeredMotion
        defaultStyles={range(6).map(() => ({x: 0, y: 0}))}
        styles={this.getStyles}>
        {balls =>
          <div className="demo1">
            {balls.map(({x, y}, i) =>
              <div
                key={i}
                className={`demo1-ball ball-${i}`}
                style={{
                  WebkitTransform: `translate3d(${x - 25}px, ${y - 25}px, 0)`,
                  transform: `translate3d(${x - 25}px, ${y - 25}px, 0)`,
                  zIndex: balls.length - i,
                }} />
            )}
          </div>
        }
      </StaggeredMotion>
    );
  };
}

这个适合做跟屁虫运动第一个没延迟后面的都有一点delay

5.下面这个在实际中会经常用到

getStyles = () => {
    const {todos, value, selected} = this.state;
    return todos.filter(({data: {isDone, text}}) => {
      return text.toUpperCase().indexOf(value.toUpperCase()) >= 0 &&
        (selected === 'completed' && isDone ||
        selected === 'active' && !isDone ||
        selected === 'all');
    })
    .map((todo, i) => {
      return {
        ...todo,
        style: {
          height: spring(60, presets.gentle),
          opacity: spring(1, presets.gentle),
        }
      };
    });
  };
  willEnter() {
    return {
      height: 0,
      opacity: 1,
    };
  };
  willLeave() {
    return {
      height: spring(0),
      opacity: spring(0),
    };
  };
<TransitionMotion
            // 初始style 必须有key   data: {isDone, text}这个不是必须的
            defaultStyles={this.getDefaultStyles()}
            styles={this.getStyles()}
            willLeave={this.willLeave}
            willEnter={this.willEnter}>
            {styles =>
              <ul className="todo-list">
                {styles.map(({key, style, data: {isDone, text}}) =>
                  <li key={key} style={style} className={isDone ? 'completed' : ''}>
                    <div className="view">
                      <input
                        className="toggle"
                        type="checkbox"
                        onChange={this.handleDone.bind(null, key)}
                        checked={isDone}
                      />
                      <label>{text}</label>
                      <button
                        className="destroy"
                        onClick={this.handleDestroy.bind(null, key)}
                      />
                    </div>
                  </li>
                )}
              </ul>
            }
          </TransitionMotion>

用法其实也很简单可以参考react-transition-group的用法