资料

在 2017 年学习 React + Redux 的一些建议 react官网翻译 react菜鸟教程 react router 一步一步实现一个React SPA应用教程（一个比较全的例子） 个人做的react网站，比较简单

jsx

指 react中的html模板写法 - 可以赋值给变量 - {}用来嵌套表达式 - jsx创建后不可变，只能重新渲染

注意项： 1. jsx是React.createElement(component,props,..children)方法的语法糖 2. jsx组件开头必须大写 3. 使用jsx需要引入react变量： import React from ‘react’ 4. jsx赋值给变量使用 (1) 变量作为标签使用（变量必须大写）

const SpecificStory = App; <SpecificStory story={ff} />;

(2) 变量作为输出

description = <strong>even</strong>; <div>{props.number} is an {description} number</div>

. 5. jsx属性 （1）未指定值时默认为true <MyTextBox autocomplete /> （2）…属性扩展，一次性全部传入

xxx={firstName: 'Ben', lastName: 'Hector'}//属性写成集合 <Greeting {...xxx} />; //上述等同于： <Greeting firstName="Ben" lastName="Hector" />

. 6. {}表达式，结果是false、null、undefined 和 true 不会被渲染

自定义组件

1、定义 & 使用

函数定义使用方式

规则：形参接收porps，返回一个jsx

function App(props){ return <h1>{props.name}</h1> } const element=<App name='cc'>

ES6 类定义使用方式

class App extends React.Component{ render(){ return <h1>{this.props}</h1> } } const element=<App name='cc'>

2、props

不可修改，由自定义组件调用者传递来的属性集合

3、state (只适用于es6类)

类的固有属性，特点是，放在这个属性里的值改变时，重新渲染值所在的dom

state是异步的，如果需要上次的状态值，这种情况使用函数调用，它会将状态作为参数传入 //prevState是当前运行到代码是的state值 this.setState(function(prevState, props) { return { counter: prevState.counter + props.increment }; }); setState()方法参数：可以是{} 或 fn

4、生命周期

周期事件分成两类：挂载和更新

componentDidMountcomponentWillUnmount

5、事件

必须驼峰写法，值应该是个方法

<button onClick={activateLasers}> Activate Lasers </button>

阻止事件的默认行为，调用preventDefault()

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

6、条件渲染

方式有如下几种： 1. 做出子组件，在子组件里根据条件返回不同的内容 2. 把组件放在变量里，render里用{}条件输出 3. && 在{}里可以和jsx一起用 true && expression 总是返回 expression ,false时react元素不会渲染

{unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> }

. 4. 三目表达式也可

8、children组件

组件被调用时嵌套有子组件时，自组建通过props.children传递 上述算是默认情况，可以自己把子组件放在props里传递，而不是放在组件内作为子组件去传递。

9、特例：表单组件受控（可非受控）

input textarea select表单组件的内容更新由react控制（原来是自动更新） 控制方式： value值是state决定， 更新由触发onchange等事件改变state， 从而类似原来的html表单组件更新，好处是，可自由控制触发条件和渲染结果。

1 . input、textarea、select 值由value控制，更新由onChange事件控制

<input type="text" value={this.state.value} onChange={this.handleChange} /> //函数 handleChange(event) { this.setState({value: event.target.value}); } <textarea value={this.state.value} onChange={this.handleChange} /> <select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select>

2 . check（应该算在input部分） 值由checked控制

注意： （1）多个表单时，公用一个处理事件，给表单添加name属性，用来区别和设置

<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> //事件 handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; //name与value引用的state值相同 this.setState({ [name]: value });

(2) defaultValue指定默认值 <input ><select> 和 <textarea>使用defaultValue 其中<input type="checkbox">和 <input type="radio">使用 defaultChecked

10、状态提升

当几个组件需要共用同一个状态数据时，由于各个组件state是独立的，此时需要状态提升，即把state提升到他们的父组件。 例子： 假设两个input组件a b，他们的显示值需要同步，更改其中一个时另一个也同步更改。 1. 怎么使用共用状态？ 显然共同的状态应该放在父组件z，ab组件显示值应该是z的状态，通过props把z的状态传递到ab。 2. 一个组件改变状态时，另一个如何同步？ ab改变值时，必须调用z的方法，来改变z的状态，这样ab组件会同时刷新。z的方法也通过props传递到自组件。 总的来说：父组件用props传递方法和状态给2个自组件，子组件通过调用其方法改变父组件的方法。

ref

使用 refs 的情况：(尽量避免使用 refs) 1 .使用 refs 的情况：(尽量避免使用 refs 2 .触发强制动画 3 .集成第三方 DOM 库

用于DOM（一般只考虑此种情况） 1 添加ref

<input type="text" ref={(ele) => { this.textInput = ele; }} />

通过匿名函数把原生dom赋值到对象变量里。

2 使用 存储的是原生dom this.textInput.focus();

11、ref

使用 refs 的情况：(尽量避免使用 refs) 1 .使用 refs 的情况：(尽量避免使用 refs 2 .触发强制动画 3 .集成第三方 DOM 库

用于DOM（一般只考虑此种情况） 1 添加ref

Greeting.propTypes = { name: PropTypes.string };

12、propType

出于性能原因，propTypes 只在开发模式下进行检查。 安装 导入 import PropTypes from 'prop-types'; 使用