react 杂谈

1 JSX 

a   在JSX中使用js表达式，并且表达式要包含在大括号里

在书写jsx的时候会带上换行和缩进，可以增强代码的可读性，推荐在jsx代码外面括上一个小括号，

防止分号自动插入的bug

b  jsx属性

c  jsx嵌套

d  jsx防注入攻击  ： React DOM在渲染之前会默认过滤所有传入的值，确保应用不会被注入攻击

e  Babel 转化器会把JSX转化成一个名为  React.createElement() 的方法调用

2  元素渲染 【元素是构成react应用的最小单位】

a    渲染到 DOM 中使用  ReactDOM.render方法

b     更新元素渲染   更新界面的唯一方法是 创建一个新的元素，然后传入ReactDOM.render

c      React只会更新必要的部分   只会更新渲染文本节点中发生变化的内容

3  组件& props 【组件可以将UI切分成一些独立的，可复用的部件，只需专注构建每一个单独的部件】

a  定义组件  【最简单的方法： js函数定义】 下面为两种不同的方式

b  组件渲染 【React遇到的元素是用户自定义的组件】

tip: 组件名称必须以大写字母开头

c   组合组件 【组件可以在它的输出中引用其他组件】

tip: 组件的返回值只能有一个根元素， 所以需要用<div>来包裹所有的<welcome />元素的原因

d: 提取组件【可以将组件切分为更小的组件】 下面的代码将多个业务逻辑混合在一起，难以维护和复用

e   props的只读性 【所有react组件必须像纯函数使用它们的props】

4    state与生命周期

a   直接更新状态   

b    状态更新可能是异步  

c   状态更新合并

d   数据自顶向下流动

任何状态始终由某些特定组件所有，并且从该状态导出的任何数或UI只能影响

树中下方组件

5   事件处理

a  react事件绑定属性命名采用驼峰写法

b   采用jsx语法需要传入一个函数作为事件处理函数， 而不是一个字符串

c   react 不能使用返回false 的方式组织默认行为，必须明确使用  preventDefault

d  绑定事件this的两种方式

d1:构造函数中绑定

d2: 属性初始化语法

e   向事件处理程序传递参数

e1: 在类组件中定义的监听函数，事件对象e要排在传递参数的后面

6  条件渲染 React中条件渲染和js中的一致  使用js操作符if或条件运算符来创建当前状态的元素

a   if   语句    

b   && 

c     三目运算符

d  阻止组件渲染  隐藏组件   render方法返回null

tip:  组件的render方法返回null 并不会影响该组件的生命周期方法的回调   componentWillUpdate 和 componentDidUpdate 依然可以被调用。

7  列表 & keys

a 数组元素中使用的key 在其兄弟之间应该是独一无二的， 不需要全局唯一

tip: key值一定要放在其环绕数组的上下文中才有意义， key会作为给react的提示， 不会传递给你的组件， 如果

组件中需要使用，用其他属性名显示传递这个值

8   表单

受控组件： 构造一个处理提交表单并可访问用户输入表单数据的函数

eg:  使用input.val()函数可以实时的获取最新的输入框输入，react中可以使用state  获取变化

疑问？？？ 在html页面中， 不论是input还是select都是自动发生内容变化，可以通过val()获取最新的内容

为什么在react中需要添加监听函数

答案: 在react中，可变的状态通常保存在组件的状态属性中，只能用setState()方法进行更新

b : <input type="file">  该标签value属性只读的，所以它是react中一个非受控组件

9  状态提升    几个组件公用状态数据， 可以将共享的状态提升至他们最近的父组件中管理