快速使用React脚手架搭建React项目

1.首先本地安装node.js/npm 此步省略

2.npm install -g create-react-app

3.create-react-app my-project(创建项目名称)

4.npm start(启动项目)

React 的生命周期方法有哪些?

componentWillMount:在渲染之前执行,用于根组件中的 App 级配置。

/* 可以在这个周期函数里面发送Http请求数据 */
componentDidMount:在第一次渲染之后执行,可以在这里做AJAX请求,DOM 的操作或状态更新以及设置事件监听器。

componentWillReceiveProps:在初始化render的时候不会执行,它会在组件接受到新的状态(Props)时被触发,一般用于父组件状态更新时子组件的重新渲染

shouldComponentUpdate:确定是否更新组件。默认情况下,它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染,则可以返回false,这是一个提高性能的方法。

componentWillUpdate:在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。

componentDidUpdate:它主要用于更新DOM以响应props或state更改。

componentWillUnmount:它用于取消任何的网络请求,或删除与组件关联的所有事件监听器
生命周期.webp

挂载

当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

propTypes

检查父组件传过来的参数类型 调用组件传递进来的属性是只读的 => “不允许组件内部直接修改属性「但是我们可以把属性值赋值给别的状态或者变量,以后修改别的变量或者状态是可以的」” ;虽然不能直接修改,但是可以设定一些校验规则:类型、默认值、是否必传等等

setState

  • setState在周期函数或者合成事件中,都是异步操作,触发setState执行,没有立即去进行更新(此时状态还没有被修改)shouldComponentUpdate => componentWillUpate => 更改状态 => render => componentDidUpdate, 先把下面的任务都完成,再去执行更新的逻辑,这样可以保证周期函数执行的顺序的正确性
  • 并且支持第二个参数,在当前完成执行完成后触发(比componentDidUpdate还要晚一些),也就是说这里面就是更新好的数据。
  • 但是在一个异步(定时器,事件绑定,ajax,promise,await,requestAnimationFrame...)操作的函数中,执行setState,它执行的就是同步的逻辑

Hooks

useState

useState使用状态,返回结果是一个数组
let [state,setState] = useState(0)

  • 当前的0是seate的状态,可以执行setState的方法以此来改变state的状态

useRef

  1. btnX = useRef()
  2. 标签行间属性 ref=

useEffect(()=>{},[])

1.类似于componentDidMount & componentDidUpdate在第一次或者每一次重新渲染完都会触发
2.如果第二个参数是一个空数组则相当于componentDidMount,只有在一次触发
3.第二个值也是可以设置依赖项
4.它可以return出一个小函数,小函数里面是在组件卸载的时候触发执行,(函数组件特点:每一次重新渲染,其实都是让函数重新执行,此时"相当于上一次执行产生的组件卸载,又创建一个新的组件"),组件重新渲染:先把返回的小函数执行(认为上一个组件被卸载了,获取状态信息还是上一次的呢,然后函数重新执行,再次触发useEffect传递进来的函数,状态是最新的)

useEffect(()=>{
    return ()=>{

   }
},[])

组件信息通讯

单向数据流模式传递

基于属性传递适用于父子组件

  • 父组件调用子组件,基于属性的方式,把信息传递给子组件
  • 默认是单向数据流传递
  • 但是我们可以基于回调函数的方式实现子组件修改父组件中的内容实施方案:父组件基于属性,把自己的一个方法传递给子组件,子组件中获取这个方法,并且把其执行,从而实现修改父组件中的信息

传统执行上下文

适用于具备共同祖先元素(页面最外层包一层壳子,这个壳子可以作为所有组件的祖先元素)
==>祖先组件内部,把后期后代需要的信息,全部挂载到上下文中,
在后代组件内部,如果需要用到哪个信息,就直接注册一下这样就可以直接使用了
信息:信息/状态/函数....

传统实现上下文挂载的文案,要求祖先组件只能是类组件
1.设定上下文中信息的类型

static childContextTypes = {
	  比如:title:PropTypes.string
	}

2.向上下文中挂载信息(方法会在第一次以及每一次组件渲染的时候重新执行,并且按照最新的属性和状态值更新上下文中的信息,这样后代组件中使用的上下文信息也是最新的了)

getCildContext(){
	return {
    };
}

类后代组件中注册需要使用的上下文信息(需要用到哪一个,就指定哪一个的类型,但是一定要和祖先中指定的类型保持完全一致才可)

static contextTypes = {
     supNum:ProTypes.number,
     oppNum:ProTypes.number
}

函数后代组件内部基于第二个参数context即可获取上下文信息

React提供的新方法

React.createContext();创建一个上下文对象

在祖先元素中放置上下文信息,ThemContext.Provider 行间属性value={/* 某个值 */}
1.在后代类组件中使用上下文对象,(祖先中放置的上下文信息,在后代中都可以使用)

static contextType = ThemContext;

2.在函数组件中我们基于hook函数,让函数式组件支持新版ContentAPI中的上下文使用useContext

cosnt context = useContext(ThemContext)

函数组件中也可以使用ThemContext.Consumer消费上下文

<Themcontext.Consumer>{context=>{
	return <div></div>
}}</Themcontext.Consumer>

Q.E.D.


学而不厌 不耻下问