react学习记录（二） 主要概念

一、JSX

1、JSX中可以嵌套表达式{}

2、JSX本身就是一个表达式对象。

3、JSX中通过使用“”双引号或者{}来作为属性

4、JSX必须明确声明字对象，没有子对象，应该使用自闭和标签

5、JSX可以防止注入攻击。

6、JSX代表了对象，可以使用babel将JSX转换为javascript对象。

二、渲染元素(elemens)

元素就是你希望在屏幕前展示的东西

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

　　

元素时不可变动的。

react仅仅更新变化的元素，而不是所有的元素。

react中并不思考元素如何变动，而是思考在不同节点元素是如何变现的，因为元素时不可变动的。返回不同时点的多个不同元素，而不是将一个元素在不同时点进行更改。

三、组件（components）和属性（props）

可以将组件视为一个对象，他接受props作为参数，并返回元素（elements）;

组件有两种定义方式，function和class

最简单的是使用function

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

　　

也可以使用class的方式

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

　　

props是父组件作为属性传递给子组件作为参数。

组件尽可以首字母大写的方式定义，小写字母可能被误认为是dom中的标准元素如《div》

对于可以重用的组件，要进行分离，而不是将所有的组件都写在一起。

props是不允许改变的。

四、组件的私有状态state和生命周期

state仅可以用于class定义的组件，他是组件的私有属性，组件可以更改他。

生命周期

constructor 

componentWillMount

render()

componentDidMount

componentWillUnmount

每次调用setState都会重新调用render（）

注意：

不要直接修改component的state,而是使用setState,因为只有setState才会重新调用render渲染界面

setState可能异步更新，因此如果依赖上一个状态时应使用prevState

this.setState((prevState,props)=>({
    counter: prevState.counter + props.increment
}))

state的更新是聚合的，可以一次只更新一个状态，其他状态不会更新，仍保持原样。

　

react是单项数据流，只能从上向下进行数据流动。

五、处理事件

react处理事件与html的不同：

1、html中使用小写如onclick，而react中使用驼峰标示如onClick

2、html中使用字符串标示处理函数，而react中使用{func}作为处理函数

3、react中使用event.preventDefault()明确声明阻止原先的行为。

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

　　

4、如果绑定的时间没有使用（）调用的话，应该在constructor中使用bind(this)声明，才能使用this.functionj进行调用。

5、传递参数的两种形式

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

　　

六、条件渲染

1、阻止组件的渲染：

通过在render中return null;

2、三元运算符，进行条件判断

3、Logical && Operator：true&&expression总是返回expression,false&&expression总是返回false

4、在条件选择中可以将元素定义为一个变量，这样就不用一直写return，而只用最后写一次return

5、if else 进行条件渲染。

七、lists and keys(列表和key)

key 帮助react锁定那些元素发生了改变，给予元素唯一的标示，便于比较元素是否发生了变化。

key通常只在map生成数组时使用，而不是在单个的元素中使用。

key在兄弟组件中必须保持唯一，全局无需保持唯一。

key仅用于react内部，无法进行调用。

八、表单

input:event.target.value代表输入的值，使用value代表输入框显示的值，使用defaultValue代表默认的值。

textarea和input是完全相同的。

submit：event.preventDefault()可以组织默认的上传

select:react中使用value在select标签中，而不像html中使用selected作为选择。

<input type="text">, <textarea>, 和<select> 基本相同，都是使用value作为其值。

他们都是controlled component.

file：是uncontrolled component

当需要同时使用多个controlled component时候可以给每个以name属性，这样可以基于name来表示不同的组件的值了

控制输入，可以使用value={null}

 九、lift state up

当需要在相同的组件共享内容时，最好的方法就是把需要共享的内容交给父元素进行保存和处理，以便于使用data down flow共享数据。

十、composition and inheritence

react中仅有composition,不推荐使用inheritence

十一、app构建流程

（1）制作模拟界面

 

（2）定义api接口数据的格式

 

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

　　

（3）将界面按层次拆分

原则：拆分的组件原则上只做一件事情。

拆分的组件多和api数据model中的数据是一致的。每个组件负责一个数据。

将组件拆分之后并且给予一个便于辨认的名字。

将识别的所有组件层次化列示

FilterableProductTable

• SearchBar

• ProductTable

  • ProductCategoryRow
  • ProductRow

（4）建立一个静态版本的界面

不要使用state,因为state是用来负责界面变动处理的，现在还不需要它。

我们可以采用自上而下的方式构建组件（通常是小型项目）和自下而上的方式构建界面（大型项目）

一般最顶级的界面接受整个api数据，并通过props传递给各个组件。

所有的组件仅有render方法，因为是静态的。

（5）识别UI所需的state(最小但是完整）

识别的state可以完整的描述当前的整个页面。

（1）识别页面中所有的数据：

用户在搜索框输入的数据

选择框是否被选中

产品列表

筛选的产品列表

（2）问三个问题；

a、是否从父组件的props传入

b、是否随着时间而变化

c、是否可以通过其他数据和条件计算而来

通过三个条件询问：

用户输入的数据：无法通过props获得，随着时间而变化，无法计算而成，因此它应该作为state反映该输入框的变化

选择框：无法通过props获得，随着时间而变化，无法计算而成，因此它应该作为state反映该选择框的变化

产品列表：通过顶级组件的props可以导入api数据，因此不需要将其作为state便可以完整描述整个页面。

筛选的产品列表：可以通过用户输入的输入数据、选择框和产品列表三项计算而来，因此也不需要通过它便可以描述整个完整界面。

（6）识别state应该存在于那个组件中

选择步骤：

a、识别每个组件渲染时是否使用到相应的state

b、找到最顶层的需要该state的组件

c、确认是拥有state的最顶层组件（common component）还是更高一层的组件拥有该state

d、如果无法确认那个组件应该享有state,可以建立一个state在common component之上，用于保存state

ProductTable:需要产品列表和inputState和choiceState来展示列

SearchBar:需要inputState和choiceState来展示对应的组件

ProductTable和SearchBar共同的组件（common component）是FilterableProductTable,

因此我们将inputState和choiceState保存到FilterableProductTable

（7）添加相反的数据流

现在输入框和选择框从父组件得到信息，然而当用户在输入框和选择框操作时没有响应，这时就需要在父组件建立一个回调函数，让子组件发生动作如输入内容时，调用父组件的函数，并设置父组件的state,这样便可以渲染整个页面。