React基础与实践|青训营笔记

react特点

声明式

可以轻松描述应用

组件化

组件是react的核心，一个完整的react应用是由若干个组件搭建起来的，每个组件有自己的数据和方法，组件具体如何划分，需要根据不同的项目来确定。 包括类组件和函数组件

跨平台编写

只需编写一套代码，便可以将代码打包成不同平台上应用，极大提高了开发效率，并且相对全部原生开发的应用来说，维护成本也相对更低 等待资源加载时间和大部分情况下浏览器单线程执行时影响web性能的两大主要原因

Recat.lazy()

React.lazy接收一个函数作为参数，该函数必须通过调用import来返回一个Promise来加载组件，返回的Promise对象的resolve方法接收组件默认导出的模块

看视频的时候没怎么看懂，可以具体看一下这篇文章带你真正用起来React lazy - 掘金 (juejin.cn) Scheduler(调度器)

• 维护时间切片
• 与浏览器任务调度
• 优先级调度 Reconciler(协调器)
• 将JSX转化为Riber
• Fiber树对比（双缓存）
• 确定本次更新的Fiber Renderer(渲染器) 渲染器用于管理一颗React树使其可以根据底层平台进行不同的调用

React常见Hook及作用

• useState 返回一个state及更新state的函数
• useEffect 可以让你在函数组件中执行某些操作，挂载时、依赖变化时甚至说卸载前。
• useContext 接收最近的上层context对象，并返回其值，一般与createContext 一起使用
• useRef 返回一个可变的ref对象，在组件生命周期内持续存在。
• useMemo 参数为计算函数和依赖项，只有在依赖项变化时才调用计算函数。返回函数的计算值
• useCallback useCallback(fn, deps), 相当于useMemo(0)=> fn, deps),一般返回的是一个新函数。
• useReducer useState的更丰富替代方案，返回[state, dispatch]. 这里state可以是复杂对象，dispatch
• 可以更新这个复杂对象。 useImperativeHandle
• 可以给父组件暴露方法。一般与forwardRef一起使用
• useEffect的执行时机是浏览器完成渲染之后，而useLayoutEffect的执行时机是浏览器把
• useLayoutEffect 内容真正渲染到界面之前，和componentDidMount 等价。 非父子通信context

//非父子通信context
const Globalcontext=React.createContext()//创建context对象
let [()]=useState(0)
export default class BackGround extends Component {
  username=React.createRef()
  passward=React.createRef()
  setlist([j,k,j])
  {console.log(list)}
  render() {
    return (
      <Globalcontext.Provider value={{
       value:'hhh'
      }}>
        <div>
        BackGround
        <Lh labal='用户名' type='text' ref={this.username} ></Lh>
        <Lh labal='密码' type='passward' ref={this.passward}></Lh>
        <button>登录</button>
        <button onClick={()=>{
         this.username.current.clear()
         this.passward.current.clear()
        }}>取消</button>
        <Welcome/>
      </div>
      </Globalcontext.Provider>
    )
  }
}

class Lh extends Component{
  state={
    value:''
  }
  clear(){
    this.setState({
      value:''
    })
  }
    render(){
      return(
        <Globalcontext.Consumer>
          {
            (value)=>{
          return(
            <div>
                {console.log(value.vname)}
          <labal>{this.props.labal}</labal>
          <input type={this.props.type}  value={this.state.value} onChange={evt=>this.setState({
            value:evt.target.value
          })}/>
        </div>
          )
          }
          }
          
        </Globalcontext.Consumer>
        
        
      )
    }
}
class Welcome extends Component{
  render(){
    return(
      <Globalcontext.Consumer>
        {
          (vname)=>{
           return(
            <div>
            欢迎登录{console.log(vname)}
           </div>
           ) 
          }
        }
        
      </Globalcontext.Consumer>
    )
  }
}