什么是jsx

• jsx是javascript的语法扩展, 且具备javascript的全部功能,jsx可以创建react元素

• jsx语法中,你可以在大括号内放置任何有效的javascript表达式

• jsx特定属性

  • 可以通过引号来将属性值指定为字符串字面量
  • 也可以使用大括号赖在属性值中插入一个javascript表达式

• 假如一个标签里面没有内容,你可以使用/>来闭合标签,就像xml语法一样

• jsx标签能够包含很多子元素

• jsx防止注入攻击

  • react dom在渲染所有输入内容之前,默认会进行转义,他可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容,所有的内容在渲染之前都被转换成了字符串,这样可以有效的防止xss攻击

• jsx表示对象

  • babel会把jsx转义成一个react,createElement()函数使用

元素渲染

• 元素是构成 React 应用的最小砖块。
• react创建的应用中提出只有一个单一的根dom节点
• 需要将一个react元素渲染到根dom节点中,只需要吧他们一起传入ReactDOM.render();
• 更新已经渲染的元素
  • react元素是不可变对象,一旦被创建,你就无法更改它的子元素或者属性,它代表了某个特定时刻的ui
  • 更新ui唯一的方式就是创建一个全新的元素,并将其传入reactdom.render()
• react更新它需要更新的部分
  • reactdom会将元素和他的子元素与他们之前的状态进行比较,并只会进行必要的更新来使用dom达到预期的状态

组件和props

• 函数组件
  • javascript中的函数可以创建一个组件,因为它接收唯一带有数据的props对象与并返回一个react元素,本质就是一个javascript函数
• 类式组件
  • es6中的cladd也可以创建组件
• props
  • 组件无论是使用函数组件还是类式组件,都不能修改自身的props
  • 更多用于父组件与子组件的传值

state&生命周期

• 只有类式组件含有state,函数组件没有自带
• state是组件的状态,自身可以更改
• 不能直接修改state,必须使用this.setState函数
• state的关系可能是异步的
  • 出于性能考虑,react可能会把多个setState()调用合并成一个调用
  • this,props和this,state可能会异步关系,所以你不要依赖他们的值来更新下一个状态
• state的更新会被合并
  • 打你调用setState()的时候,react会把你提供的对象合并到当前的state
• 数据是向下流动的
  • 不管是父组件函数子组件都无法知道某个组件是有状态得还是无状态的,并且它们也不关心它是函数组件还是class组件
  • state是局部的或是封装的,其他的组件都无法直接访问
  • 组件可以选择把它的state作为props向下传递到它的子组件中--这就是单向的数据流

事件处理

• react的事件的命名采用驼峰法命名
• 使用jsx语法是你需要传入一个函数作为事件处理函数,而不是一个字符串
• 在react中阻止事件的默认行为不能通过返回fasle的方式去阻止,必须显示的使用preventDefault
• 如果没有在方法后面添加(),你需要绑定this
  • this.handle()
  • this.handle.bind(this)
  • ()=>this.handle()
• 传递参数
• e会被作为第二个参数进行传递,箭头函数中事件对象必须显示的传递,bind()方式,事件对象以及更多的参数是隐式传递

  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  

条件渲染

• 与运算符&&
  • JSX中可以迁入任何表达式,逻辑与运算符&&也可以插入进去很方便的进行条件渲染
• 三目运算符
• 组织组件渲染
  • 如果你像隐藏组件,即使已经被其他的组件渲染了,你可以让render()方法直接返回null,而不进行任何渲染;不会影响生命周期

渲染多个组件

• key:用来帮助react识别那些元素改变了,应该给数组中的每一个元素赋予一个确定的标识
• 如果列表项目的顺序可能会变化,我们不建议用索引来作为key,因为会导致性能变差,还可能引起组件状态的问题,如果不指定显示的key值,你们react将默认使用索引值来作为列表项目的key值
• key只是在兄弟节点之间必须唯一

受控组件

• 在html中表单元素之类的表单元素通常自己维护state,并根据用户输入进行更新,而在react中,可变状态通常保存在state中,只能通过setstate()来更新
• 使用react的state成为唯一的数据源,渲染表单的react组件还控制着用户输入过程中表单发生的操作,被react以这种方式控制取值的表单输入元素就叫做受控组件

状态提升

• 好多个子组件拥有一样的变化数据,可以将数据统一放在父组件管理