REACT官方文档阅读笔记

花泽肥菜
220 阅读3分钟

核心概念中一些有感悟的小语句

  1. 更新UI视图的唯一方法是执行render函数，也就是说，如果UI视图更新了，则render函数一定执行了
  2. react建议从组件自身的角度命名props，而不是从调用组件的上下文的角度命名
  3. 所有的react组件必须像纯函数保护其入参一样保护自己的prop不被更改；而state则是私有的、局部的，完全受控于组件内部，外部完全不能访问
  4. componentDidMount()方法会在组件以及被渲染到dom中后运行
  5. 如果在setState的时候需要依赖当前的state或者props状态来更新下一个状态，则使用以下写法最严谨
this.setState((state, props) => {
    canSug: !state.canSug
})
  1. react绑定事件默认没有传入this，传入this的常用两种方法
  • 使用箭头函数定义该方法 onClick=()=>{}
  • 使用箭头函数在给react node绑定方法的时候传入 <Button onClick={(e)=>{this.handleClickBtn(e)}} />
  1. 在JavaScript中，true&&expression总是会返回expression，false&&expression总是会返回false
  2. 在map方法中的元素需要设置key属性，这个key需要在其兄弟节点（即在该map方法中）之间保持唯一性，但是不需要在全局保持唯一性。在给元素增加key的时候，如果元素顺序不会变，用index作为key没有什么问题；如果元素顺序会变化，则用index作为key会导致diff性能差，速度慢。因为元素顺序变化，会导致index发生变化，元素的key也会跟着变化，非受控组件的state可能会互相篡改，无法预期其变化。
  3. 受控组件指的是组件内部维护了state，状态受自己的控制；不受控组件指的是组件完全维护props，状态不受自己的控制
  4. React Hooks：可以钩入react的特性。比如在纯函数组件中钩入state的属性，从而可以在纯函数组件中使用state。例如，再写一个组件的时候，刚开始以为是纯函数，写着写着发现需要使用state，如果不使用react hooks，那么只能把这个纯函数组件修改为class定义的react组件。
  • State hook
const [ state, setState ] = useState(initialState)
  • Effect hook
useEffect(didUpdate)
  • useContext
const value = useContext(Mycontext)
  • 自定义hook：自定义hook是一个函数，其名称以use开头，函数内部可以调用其他hook

高级指引知识点

  1. context
// React.createContext 创建一个context对象
const MyContext = React.createContext(defaultValue);
// Context.Provider 每个context对象都会返回一个Provider React组件，允许消费组件订阅context的变化。Provider的value值发生变化时，其内部的所有消费组件都会重新渲染，不受制于shouldComponentUpdate方法。
<MyContext.Provider value={123}>
// Class.contextType 挂载class上的contextType属性会被重新赋值为一个由React.createContext()创建的Context对象。
class MyClass extends React.component {
    ...
}
Myclass.contextType = Mycontext;
// Context.consumer React组件可以订阅到context的变更
<MyContext.Consumer>
    {value => /*基于context值进行渲染*/}
</MyContext.Consumer>
avatar
文章
阅读
粉丝