受控组件与非受控组件

受控组件与非受控组件

受控组件实时监听数据的变化

// 受控组件（用`value={note}`）
const NoteSection: React.FC = () => {
  const [note, setNote] = useState('');
  return (
    <Wrapper>
      <label>
        <span>备注</span>
        <input value={note} onChange={(e)=> setNote(e.target.value)} type="text" placeholder='在这里添加备注' />
      </label>
    </Wrapper>
  )
}

非受控组件只在最后监听数据变化。（用defaultValue={note}）

//非受控组件
const NoteSection: React.FC = () => {
  const [note, setNote] = useState('');
  const refInput = useRef<HTMLInputElement>(null);
  const onBlur = ()=> {
    if(refInput.current != null) {
      setNote(refInput.current.value);
    }
  };
  return (
    <Wrapper>
      <label>
        <span>备注</span>
        <input ref={refInput} defaultValue={note} onBlur={onBlur} type="text" placeholder='在这里添加备注' />
      </label>
    </Wrapper>
  )
}

---

知识点：React onChange 的触发时机

React onChange 会在你输入改变的时候触发。
HTML onChange 在你鼠标移走（blur）时候触发，早已onBlur事件。

---

ts类型声明

图中ts声明参数obj为selected对象中的一部分，用Partial。

image.png

---

TS 中的尖括号到底是什么意思？

const x: React.FC= () => {}
x的类型是一个react函数组件

const x: React.FC<Props> = (props) => {}
x的类型是一个接受Props的react函数组件
props的类型是Props

---

TypeScript 用以致学

自定义hooks是在函数内使用useState,使用return返回一些读写接口到外面去，这个函数就叫自定义hook

---

Route之exact

加上exact实现路由精确跳转

<Route exact path="/tags">
  <Tags />
</Route>
<Route exact path="/tags/:tag">
  <Tag />
</Route>

---

className 合并支持

//安装
yarn add classnames
yarn add --dev @types/classnames

import cs from 'classnames';
//父组件
<Icon name="left" className='frank' onClick={onClickBack}></Icon>
//子组件
const Icon = (props: Props) => {
  const {name, children, className, ...rest} = props
  return (
    <svg className={cs('icon', className)} {...rest}>
      {props.name && <use xlinkHref={'#' + props.name}/>}
    </svg>
  );
};

两个class会合并

---

useEffect

---

typescript的 Omit用法

声明一个类型，新的类型只要前一个类型除去某几项，可以用Omit。
Omit上面大类，第二次参数是除去哪几项，用|进行分隔。

image.png