React 学习记录

1、创建React项目执行命令 create-react-app project-name
2、registerServiceWorker.js和./public/manifest.json用于PWA的serviceWorker服务和快捷启动方式的图标生成，可删除。总之他们是用于PWA相关的。
3、如果出现jsx语法，必须引入React 用于转译。在jsx语法中如果出现大写的标签，则这个标签是自定义组件的标记。即它是引入的一个react组件。
4、./src/index.js 为入口文件，它引入了一个App.js的组件，用于展现到index.html。
5、凡是一个组件继承自React.Component 那它就是一个React组件。在React中，React.Component是一个基类，所有的react组件都继承了它。
这里写图片描述
6、组件中返回的jsx最外层必须有个包裹元素，div、header 等等。如果不想生成的DOM中出现最外层的包裹元素，可用Fragment（占位符）来代替最外层的包裹元素。

7、react组件用state来存储数据，setState() 以传入对象的方式来操作改变数据。在react中数据有immutable（不可改变的）的概念，意指不提倡直接修改state中的数据，一般会将要操作的数据拷贝出来，操作过后再用setState()方法更改原数据。

this.state = { list: [1, 2, 3] } 
// fun 
const list =[...this.state.list]
list.splice(0,1)
this.setState({
    list
})
console.log(this.state.list) // [2,3]

8、在jsx中使用js的表达式或者变量要用{}包裹，绑定事件事件名称要大写 onClick,并且使用.bind(this,age1,age2)对函数的作用域进行变更。
9、jsx中如果有包含 html元素的数据不想被转译，则使用 dangerouslySetInnerHTML={{__html:text}} 来实现，
dangerouslySetInnerHTML={}中表达式传入一个{__html:text} js对象，
__hmtl为属性，值为不想被转译的数据。

this.state = { text: '<h1>hello</h1>' }
// class
const text =this.state.text
return (
    <div dangerouslySetInnerHTML={{__html: text}}></div>
)

10、在jsx中元素的for 属性要写为htmlFor， class 属性要写为className。
11、在改变元素的数据的时候，this.setState()可传入一个箭头函数，箭头函数的参数列表中可传入一个代表改变之前的组件数据的参数 prevState，prevState 指当前修改组件数据操作之前的组件数据，即未修改之前的组件数据。方便用于对组件数据的变更操作。

this.state = { list: [1] }
// fun
this.setState((prevState)=>{
  const list = [...prevState.list,2]
  return {list:list} // [1,2]
})

12、jsx语法中注释用{}包裹，里面正常写js的注释语法

{/*我是注释*/}

{
 // 单行注释
}

13、在jsx中绑定函数用.bind(this)对函数作用域进行变更的时候，可在组件
类的construcotr()方法中进行赋值定义，以减少性能的消耗。

// class
constructor(props){
  super(props)
  this.btnClick=this.btnClick.bind(this)  
}

猜你喜欢