React基础

资料

在 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、生命周期

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

• componentDidMount
• componentWillUnmount

5、事件

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

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

2. 阻止事件的默认行为，调用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';
使用