qq_46149597的博客

react自定义轮播图

react创建ts模板时文件后缀名不是ts、tsx

initialState相当于组件的状态值，把组件的状态值移到这里来定义。reducers里面则是定义一些对于状态值操作的方法，如下:我定义了增加、减少、重置的三个方法，最后将切片的reducer和切片的方法导出去。切片里边的name是key标识随便命名，不要与其它切片的name一样就行了，建议还是取一样的名字才不会乱套。接下来，我们再创建一个store.js文件，把刚才的切片导入store.js文件。然后我们在根文件中，将store.js导入进来，把根组件给包裹起来。

input的值：{input_text()}将这两个方法移动外部，函数名以“use”开头命名，然后在组件内就可以进行使用了，自定义hooks可以将组件内的方法移到外部，增加代码的直观性。return (input的值：{input_text}

与shouldComponentUpdate相比，shouldComponentUpdate更适用于组件状态或属性频繁改变的时候；PureComponent更适用于组件状态或属性很少改变的时候。PureComponent会自动匹配哪些子组件要更新，哪些不需要更新，自动将不需要更新的组件的render进行阻止。

父组件状态发生改变时，其父组件下的所有子组件都会被重新渲染一遍，当组件过多时就会造成性能下降。与UNSAFE_componentWillReceiveProps相类似，但不同的前者是在父组件渲染时会触发，而getDerivedStateFromProps()方法在父组件、子组件、自身进行渲染时都会进行触发，也包括自身的初始化阶段。页面渲染，只能访问this.props和this.state，不允许修改状态和DOM输出，class 组件中唯一必须实现的方法，需保持保持render()为纯函数。

React.createContext()创建，通过Context包裹起来，里面再进行设置与传值，与状态提升不同的是，它适用于更深的组件嵌套关系，状态提升对于很深的组件嵌套的话就明显不合适了。通过编写一个对象，对象里边包含订阅和发布方法，订阅方法里边传入回调方法，再存入list中，发布方法里边执行存在list里边的方法。你可以通过前面的方法和插槽进行组合，完成复杂的传值。插槽会使组件又回到高耦合的形式，一般要尽量少用。

把input看作一个组件，此时的input则为一个非受控组件，input内部的value属性为input内部所控制，虽然可以通过ref来进行取值与赋值操作，但是在input输入框值发生改变时无法让父组件调用render()函数来进行重新渲染。通过父组件的state，setState，与input的onChange，即可实现让这个组件监听到input输入框value值的变化。此时，input内的value属性由父组件控制，input变成了受控组件。

通过static定义类的属性，属性验证可以引入模板自带的prop-types来进行类型判断，当然你也可以自己写一个类型判断的方法，然后对类的propTypes属性进行类型编写，'propTypes'这个属性名不可自定义。默认属性需要对类的defaultProps属性进行编写覆盖，'defaultProps'这个属性名不可自定义。函数式组件直接以实参传入形参的形式，与类组件相致，不过函数组件通过外部来进行属性验证与设置默认属性。

需要注意的是this.setState()是异步的，而且同时有多个setState同步执行则会进行合并。如果需要获取更新后的实时数据，需要在this.setState()的第二个参数里的回调函数获取。

【代码】react条件渲染，元素的隐藏与显示。

{console.log(this.text)}}>方式一方式四： this.click4()}>方式四方式三：方式三

react组件的定义

【代码】react JSX基本语法。

react默认模板结构详解