关于react.js:一文读透react精髓

学和应用 react 有一年多了，最近想在梳理一下 react 基础知识, 夯实根底，激流勇进~
对于 reacr-router,redux,redux-saga 后续都会缓缓输入，心愿各位看官老爷继续关注~~ 要是能给个赞激励一下就更赞了~

一个 JSX 语法的示例，如下所示

const element = <h1>Hello, world!</h1>;

这种语法模式，既不是 HTML，也不是字符串，而是称之为 JSX，是 React 里用来形容 UI 和款式的语法，JSX 最终会被编译为非法的 JS 语句调用（编译器在遇到 { 时采纳 JS 语法进行解析，遇到 < 就采纳 HTML 规定进行解析）

JSX 中，能够应用花括号 {} 嵌入任意的 JavaScript 非法表达式，如：2 + 2、user.firstName、formatName(user)都是非法的。示例如：

const user = {
    firstName: 'Zhang',
    lastName : 'Busong'
};

const elem = (<h1>Hello, {formatName(user)}</h1>
);
/* 这里的()，实际上是可选的，然而 React 举荐退出()，这样子就会被视为一个表达式，而不会导致主动插入分号的问题 */

ReactDOM.render(
    element,
    document.getElementById('app')
)

JSX 自身也是一种表达式，所以它能够像其余表达式一样，用于给一个变量赋值、作为函数实参、作为函数返回值，等等。如：

function getGreeting(user) {if (user) {return <h1>Hello, {formatName(user)}</h1>
    }
    return <h1>Hello, Guest!</h1>;
}

留神： 1、在 JSX 中，申明属性时不要应用引号，如果申明属性的时候应用引号，那么将被作为字符串解析，而不会被作为一个表达式解析，如：

<div firstName="{user.firstName}" lastName={user.lastName}></div>

解析后，能够失去：

<div firstName="{user.firstName}" lastName="Lau"></div>

因而，当咱们须要应用一个字符串字面量的时候，能够应用引号，然而如果要作为表达式解析的时候，则不该当应用引号
2、在 JSX 中，有些属性名称须要进行非凡解决。如class 应该用 className 代替，tabindex则用 tabIndex 代替。这是因为 JSX 实质上更靠近于 JavaScript，而 class 是 JavaScript 中的保留字。同时，应该应用 camelCase 来命名一个属性，而不是应用 HTML 的属性命名形式
3、JSX 自身曾经做了防注入解决，对于那些不是明确编写的 HTML 代码，是不会被解析为 HTML DOM 的，ReactDOM 会将他们一律视为字符串，在渲染实现前就转化为字符串，所以能够避免 XSS 攻打
4、如果 JSX 标签是闭合的，那么结尾须要用/>，另外，JSX 标签是能够相互嵌套的，这和 HTML 里是一样的

JSX 通过 babel 编译，而 babel 实际上把 JSX 编译给 React.createElement() 调用。如下 JSX 代码：

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

是等同于以下的语句的：

const elem = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

React.createElement()办法会首先进行一些防止 BUG 的查看，而后返回相似以下例子的对象：

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
}

这样的对象，则称为React 元素，代表所有出现在屏幕上的货色。React 正是通过读取这些对象来构建 DOM，并且保持数据和 UI 同步的

元素（elements）是形成 React 利用的最小单元，元素形容了想要在屏幕中看到的内容，如：

const element = <h1>Hello, world</h1>;

和 DOM 元素不同的是，React 元素是纯对象，创立的代价低。并且 React 会进行优化解决，只把有必要的变动更新到 DOM 上。此外，元素和组件的概念，是不一样的，组件是由元素组成的。

在 React 中，应用 ReactDOM.render() 办法来将 React 元素渲染进一个 DOM 中。如：

ReactDOM.render(
    element,
    document.getElementById('root')
)

React 元素是不可变的，所以一旦一个元素创立实现后，咱们是无奈扭转其内容或者属性的。一个元素就像是动画里的一帧，它代表 UI 在某一时间点的样子。如果非要应用元素来形成可变动的 UI 界面，就须要应用 setInterval 了，如：

function tick() {
    const element = (<div>Now is {new Date().toLocaleTimeString()}</div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}
setInterval(tick, 1000);

在理论开发中，大多数 React 利用只会调用一次 ReactDOM.render()，所以更好的形式是应用 有状态组件

组件（component）可能将 UI 划分为独立的、可复用的局部，这样咱们就只需专一于构建每一个独自的部件。
从概念上看，组件就像是函数：承受任意的输出（称为属性，Props），返回 React 元素。React 中有两种定义组件的形式：函数定义 和类定义

这种形式是最简略的定义组件的形式，就像写一个 JS 函数一样，如：

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

还能够应用 ES6 里的类来定义一个组件，如下所示：

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

这种形式比起 函数定义 形式则更加灵便

先前，咱们遇到的 React 元素只是出现一个 DOM 标签，如：

const element = <div />

然而，React 元素也能够是用户自定义的 组件，如：

const element = <Welcome name="Tom" />

Welcome 组件中申明了一个属性 name="Tom"，而这个属性，将以props.name 的形式传递给组件，如下形式：

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

此时，对于以下的代码：

ReactDOM.render(
    <Welcome name="张不怂" />,
    document.getElementById('root')
)

最终就会以 <h1>Hello, 张不怂 </h1> 的形式出现。在这个过程中，产生了如下的事件：

对 <Welcome name="张不怂" /> 元素调用了 ReactDOM.render() 丰盛
React 将 {name: '张不怂'} 作为 props 实参来调用 Welcome 组件
Welcome 实现渲染，返回 <h1>Hello, 张不怂 </h1> 元素
ReactDOM 计算最小更新代价，而后更新 DOM

组件是能够组合的。即组件外部能够援用其余组件，如：

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

function App () {
    return (
        <div>
            <Welcome name="Tom" />
            <Welcome name="Jack" />
            <Welcome name="Mike" />
        </div>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

留神： 在 React 中，组件必须返回 繁多 的根元素，这也是为什么 App 组件中须要用 <div> 标签包裹的起因。如以下的形式，是谬误的（因为它有 3 个根元素）：

function App () {
    return (
        <Welcome name="Tom" />
        <Welcome name="Jack" />
        <Welcome name="Mike" />
    )
}

思考以下这种状况：

function sum (a, b) {return a + b;}

这种函数称为 纯函数 ：它不扭转本人的输出值，且总是对雷同的输出返回雷同的后果。
与之对抗的，则是 非纯函数，如：

function withdraw (account, amount) {account.total -= amount;}

非纯函数 在函数内扭转了输出的参数。在 React 中，无论是通过 function 还是 class 申明组件，咱们都不应该批改它本身的属性（props）。尽管 React 相当灵便，然而它也有一个严格的规定：所有的 React 组件都必须像纯函数那样来应用它们的 props

应用 类定义组件 有一些额定的益处，如领有 本地状态 这一个性。
以下是一个 类定义组件

class Clock extends React.Component {render () {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>Now is {this.props.date.toLocaleTimeString()}</h2>
            </div>
        );
    }
}

须要留神的有：

类名 即为 组件名（无论是函数定义组件还是类定义组件，组件名称的首字母都必须大写，并且继承自React.Component）
应用 render() 办法，用来返回须要出现的内容

state 是属于一个组件本身的。咱们能够在类的构造函数 constructor 中来初始化状态，如：

constructor (props) {super(props)
    this.state = {date: new Date()
    }
}

如此一来，咱们就能够在 render() 函数中应用 this.state.xxx 来援用一个状态

在利用里，往往都会有许许多多的组件。在组件销毁后，回收和开释它们所占据的资源十分重要。
在 时钟利用 的例子里，咱们须要在第一次渲染到 DOM 的时候设置一个定时器，并且须要在相应的 DOM 销毁后，革除这个定时器。那么，这种状况下，React 为咱们提供了生命周期的钩子函数，不便咱们进行应用。在 React 中，生命周期分为：
1）Mount 已插入实在 DOM
2）Update 正在从新渲染
3）Unmount 已移出实在 DOM
而相应的，生命周期钩子函数有：

componentWillMount
componentDidMount
componentWillUpdate(newProps, nextState)
componentDidUpdate(prevProps, prevState)
componentWillUnmount()

此外，还有两种非凡状态的处理函数：

componentWillReceiveProps(nextProps) 已加载的组件收到新的参数时调动
shouldComponentUpdate(nextProps, nextState) 组件判断是否从新渲染时调用

因而，基于生命周期钩子函数，咱们能够实现一个时钟利用如下：

class Clock extends React.Component {constructor (props) {super(props);
        this.state = {date: new Date()
        }
    }
    tick () {
        this.setState({date: new Date()
        });
    }
    componentDidMount () {this.timerId = setInterval(() => {this.tick()
        }, 1000);
    }
    componentWillUnmount () {clearInterval(this.timerId);
    }
    render () {
        return (<div>Now is {this.state.date.toLocaleTimeString()}</div>
        );
    }
}

须要留神的是：
1）render()里用不到的 state，不应该申明在state 里
2）不能间接应用 this.state.xxx = xxx 的形式来扭转一个 state 的值，应该应用this.setState()。如：

setName () {
    this.setState({name: '张不怂'})
}

this.setState()会主动笼罩 this.state 里相应的属性，并触发 render() 从新渲染。
3）状态更新可能是异步的 React 能够将多个setState() 调用合并成一个调用来晋升性能。且因为 this.props 和this.state可能是异步更新的，所以不应该依附它们的值来计算下一个状态。这种状况下，能够给 setState 传入一个函数，如：

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

React 元素的事件与 DOM 元素相似，不过也有一些区别，如：
1）React 事件应用 camelCase 命名（onClick），而不是全小写的模式（onclick）
2）应用 JSX，传入的是事件的句柄，而不是一个字符串
如以下的 HTML：

<button onclick="increment()">ADD</button>

应用 React 的形式形容如：

<button onClick={increment}>ADD</button>

还有一个不同在于，在原生 DOM 中，咱们能够通过返回 false 来阻止默认行为，然而这在 React 中是行不通的，在 React 中须要明确应用 preventDefault() 来阻止默认行为。如：

function ActionLink () {function handleClick (e) {e.preventDefault();
        alert('Hello, world!');
    }

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

这里，事件回调函数里的 event 是通过 React 非凡解决过的（遵循 W3C 规范），所以咱们能够释怀地应用它，而不必放心跨浏览器的兼容性问题。留神： 在应用事件回调函数的时候，咱们须要特地留神 this 的指向问题，因为在 React 里，除了构造函数和生命周期钩子函数里会主动绑定 this 为以后组件外，其余的都不会主动绑定 this 的指向为以后组件 ，因而须要咱们本人留神好 this 的绑定问题，
通常而言，在一个类形式申明的组件里应用事件回调，咱们需 要在组件的 constructor 里绑定回调办法的 this 指向，如：

class Counter extends React.Component {constructor (props) {super(props);
        this.state = {counter: 0}
        // 在这里绑定指向
        this.increment = this.increment.bind(this);
    }
    increment () {
        this.setState({counter: this.state.counter + 1});
    }
    render () {
        return (
            <div>
                The counter now is: {this.state.counter}
                <button onClick={this.increment}>+1</button>
            </div>
        );
    }
}

当然，咱们还有另外一种办法来应用 箭头函数 绑定指向，就是应用 实验性 的属性初始化语法，如：

class Counter extends React.Component {increment: () => {
        this.setState({counter: this.state.counter + 1});
    }
    // ...
}

3）像事件处理程序传递参数
咱们能够为事件处理程序传递额定的参数，形式有以下两种：

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

须要留神的是，应用箭头函数的状况下，参数 e 要显式传递，而应用 bind 的状况下，则无需显式传递（参数 e 会作为最初一个参数传递给事件处理程序）

在 React 里，咱们能够创立不同的组件来封装咱们须要的性能。咱们也能够依据组件的状态，只渲染组件中的一部分内容，而条件渲染就是为此而筹备的。在 React 中，咱们能够像在 JavaScript 中写条件语句一样地写条件渲染语句，如：

function Greet(props) {
    const isLogined = props.isLogined;
    if (isLogined) {return <div>Hello !</div>;}
    return <div>Please sign in</div>;
}

ReactDOM.render(<Greet isLogined={true} />,
    document.getElementById('root')
);

这将渲染出：

<div>Hello !</div>

咱们也能够应用变量来存储元素，如：

function LogBtn(props) {
    var button;
    const isLogined = props.isLogined;
    if (isLogined) {button = <button> 退出 </button>} else {button = <button> 登陆 </button>}
    return <div>You can {button}</div>;
}

ReactDOM.render(<LogBtn isLogined={false} />,
    document.getElementById('root')
);

因为 JavaScript 语法看待 && 运算符的性质，咱们也能够应用 && 运算符来实现条件渲染，如：

function LogBtn(props) {
    var button;
    const isLogined = props.isLogined;
    return (<div>Hello        {!isLogined && (            <button> 请登陆 </button>)}        </div>
    )
}

当 props.isLogined 为 false 的时候，就会渲染出：

<div>Hello <button> 请登录 </button></div>

咱们可能曾经发现了，其实 JSX 能够像一个表达式那样子灵便应用，所以，咱们天然也能够应用三目运算符进行渲染，如：

function LogBtn (props) {
    const isLogined = props.isLogined;
    return (<div>You can             <button>{isLogined ? '退出' : '登陆'}</button>
        </div>
    )
}

有时候，咱们心愿是整个组件都不渲染，而不仅仅是部分不渲染，那么这种状况下，咱们就能够在 render() 函数里返回一个null，来实现咱们想要的成果，如：

function LogBtn (props) {
    const isLogined = props.isLogined;
    const isShow = props.isShow;
    if (isShow) {
        return (<div>You can                 <button>{isLogined ? '退出' : '登陆'}</button>
            </div>
        )
    }
    return null;
}

留神： 组件里返回 null 不会影响组件生命周期的触发，如 componentWillUpdate 和componentDidUpdate依然会被调用

在 JavaScript 中，咱们能够应用 map() 函数来对一个数组列表进行操作，如：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number*2);
console.log(doubled); // 失去[2, 4, 6, 8, 10]

同样的，在 React 里，咱们也能够应用 map() 来进行列表渲染，如：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map(number => {
    return (<li>{number}</li>
    )
});

ReactDOM.render(<ul>{listItems}</ul>,
    document.getElementById('root')
)

这将失去：

<ul><li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

当然，咱们还能够进行更好的封装，如：

function NumberList (props) {
    const numbers = props.numbers;
    const listItems = numbers.map(number => {
        return (<li>{number}</li>
        )
    });

    return <ul>{listItems}</ul>
}

当咱们运行以上的代码的时候，会发现控制台提醒：Each child in an array or iterator should have a unique "key" prop，因而，咱们须要为列表项的每一个项调配一个key，来解决这个问题，通常而言，咱们能够应用以下几种形式来提供key：

应用数据项本身的 ID，如<li key={item.itemId}>
应用索引下标（index），如：

const listItems = numbers.map((number, index) => {<li key={index}>{number}</li>
});

然而 React 不举荐在须要从新排序的列表里应用索引下标，因为会导致变得很慢。

留神： 只有在一个项的同胞里辨别彼此的时候，才须要应用到 key，key 不须要全局惟一，只须要在一个数组外部辨别彼此时惟一便可。key 的作用是给 React 一个提醒，而不会传递给组件。如果咱们在组件内须要同样的一个值，能够换个名字传递，如：

const content = posts.map(post => (<Post key={post.id} id={post.id} title={post.title} />
));

表单和其余的 React 中的 DOM 元素有所不同，因为表单元素生来就是为了保留一些外部状态。在 React 中，表单和 HTML 中的表单略有不同

HTML 中，<input>、<textarea>、<select>这类表单元素会维持本身状态，并依据用户输出进行更新。不过 React 中，可变的状态通常保留在组件的 this.state 中，且只能用 setState() 办法进行更新，如：

class NameForm extends React.Component {constructor (props) {super(props);
        this.state = {value: ''}
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange (event) {
        this.setState({value: event.target.value});
    }
    handleSubmit (event) {alert('Your name is'+this.state.value);
        event.preventDefault();} 
    render () {
        return (<form onSubmit={this.handleSubmit}>
            Name: <input type="text" value={this.state.value} onChange={this.handleChange} />
            <input type="submit" value="Submit" />
            </form>
        )
    }
}

和 HTML 中不同的是，React 中的 textarea 并不需要写成 <textarea></textarea> 的模式，而是写成 <textarea value="" ... /> 的模式便可。而对于 HTML 中的 select 标签，通常做法是：

<select>
    <option value="A">A</option>
    <option value="B" selected>B</option>
    <option value="C">C</option>
</select>

然而 React 中，不须要在须要选中的 option 处退出selected，而只须要传入一个 value，就会主动依据 value 来选中相应的选项，如：

<select value="C">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

那么如上述例子，C 所在的这个 option 就会被选中

通常一个表单都有多个输出，如果咱们为每一个输出增加处理事件，那么将会十分繁琐。好的一个解决办法是，应用 name，而后依据 event.target.name 来抉择做什么。如：

class Form extends React.Component {constructor (props) {super(props);
        this.state = {
            name: '',
            gender: '男',
            attend: false,
            profile: ''
        };
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleInputChange (event) {
        const target = event.target;
        const value = target.type==='checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({[name]: value
        });
    }
    handleSubmit (event) {
        this.setState({profile: ` 姓名：${this.state.name}，${this.state.gender}，${this.state.attend ? '加入' : '不加入'}流动 `
        });
        event.preventDefault();} 
    render () {
        return (
            <form>
            <p> 姓名：<input name="name" value={this.state.name} onChange={this.handleInputChange} /></p>
            <p> 性别：<select name="gender" value={this.state.gender} onChange={this.handleInputChange}>
                    <option value="男"> 男 </option>
                    <option value="女"> 女 </option>
                </select>
            </p>
            <p> 是否加入：<input name="attend" type="checkbox" onChange={this.handleInputChange} checked={this.state.attend} /></p>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
            <p> 您的报名信息：{this.state.profile}</p>
            </form>
        )
    }
}

大多数状况下，应用 受控组件 实现表单是首选，在受控组件中，表单数据是交由 React 组件解决的。如果想要让表单数据由 DOM 解决（即数据不保留在 React 的状态里，而是保留在 DOM 中），那么能够应用 非受控组件 ，应用 非受控组件 ，能够无需为每个状态更新编写事件处理程序，应用ref 即可实现，如：

class NameForm extends React.Component {constrcutor(props) {super(props)
    }
    handleSubmit(event) {console.log('A name was submitted:', this.input.value)
        event.preventDefault()}
    render() {
        return (<form onSubmit={this.handleSubmit}>
                <label>
                Name: <input type="text" ref={input => this.input = input} />                </label>
                <input type="submit" value="submit" />
            </form>
        )
    }
}

对于 非受控组件，如果要指定默认值，那么能够应用defaultValue，如：

<input type="text" defaultValue="Hello" ref={input => this.input = input} />

相应的，type="checkbox"和type="radio"，则应用defaultChecked

当须要几个组件共用状态数据的时候，能够应用状态晋升技术。核心思想在于：把数据抽离到最近的独特父组件，父组件治理状态（state），而后通过属性（props）传递给子组件。如实现一个货币转换的组件，能够如下：

function USD2RMB (amount) {return amount * 6.7925;}

function RMB2USD (amount) {return amount * 0.1472;}

function convert (amount, typeFn) {return typeFn(amount);
}

咱们心愿在 RMB 的输出表单上上输出的时候，USD 的输出表单上的数值也同步更新，这种状况下，如果 RMB 组件本人治理本人的状态，是很难以实现的，因而，咱们须要让这个状态晋升自父组件进行治理。如下：

class CurrencyInput extends React.Component {constructor (props) {super(props)
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange (event) {this.props.onInputChange(event.target.value)
    }
    render () {
        const value = this.props.value
        const type = this.props.type
        return (<p>{type}: <input type="text" value={value} onChange={this.handleChange} /></p>
        );
    }
}

最初定义一个独特的父组件，如下：

class CurrencyConvert extends Component {constructor (props) {super(props);
        this.state = {
            type: 'RMB',
            amount: 0
        }
        this.handleRMBChange = this.handleRMBChange.bind(this);
        this.handleUSDChange = this.handleUSDChange.bind(this);
    }
    handleRMBChange (amount) {
        this.setState({
            type: 'RMB',
            amount
        });
    }
    handleUSDChange (amount) {
        this.setState({
            type: 'USD',
            amount
        });
    }
    render () {
        const type = this.state.type;
        const amount = this.state.amount;
        const RMB = type==='RMB' ? amount : convert(amount, USB2RMB);
        const USD = type==='USD' ? amount : convert(amount, RMB2USB);
        return (
            <div>
                <p>Please Input:</p>
                <CurrencyInput type="RMB" value={RMB} onInputChange={this.handleRMBChange} />
                <CurrencyInput type="USD" value={USD} onInputChange={this.handleUSDChange} />
            </div>
        );
    }
}

React 推崇更多的是应用组合，而非应用继承。对于一些应用场景，React 给出的倡议如下：

当父组件不晓得子组件可能的内容是什么的时候，能够应用props.children，如：

function Article (props) {
    return (
        <section>
            <aside> 侧边栏 </aside>
            <article>{props.children}</article>
        </section>
    );
}

function App () {
    return (<Article> 这是一篇文章 </Article>);
}

这将渲染失去：

<section>
    <aside> 侧边栏 </aside>
    <article> 这是一篇文章 </article>
</section>

咱们还能够自定义名称，因为 JSX 实际上会被转化为非法的 JS 表达式，所以，还能够有：

function Article (props) {
    return (
        <section>
            <aside>{props.aside}</aside>
            <article>{props.children}</article>
        </section>
    );
}

function App () {
    return (
        <Article aside={<h1> 这是一个侧栏 </h1>}> 这是一篇文章 </Article>
    );
}

这将渲染失去：

<section>
    <aside><h1> 这是一个侧栏 </h1></aside>
    <article> 这是一篇文章 </article>
</section>

在 Facebook 的网站上，应用了数以千计的组件，然而实践证明还没有发现须要应用继承能力解决的状况。
属性和组合为咱们提供了清晰的、平安的形式来自定义组件的款式和行为，组件能够承受任意元素，包含：根本数据类型、React 元素、函数。
如果要在组件之间复用 UI 无关的性能，那么应该将其提取到独自的 JavaScript 模块中，这样子能够在不对组件进行扩大的前提下导入并应用函数、对象、类

关于react.js:一文读透react精髓

react 基础知识速览

1、什么是 JSX？

2、嵌入表达式

React 实战视频解说：进入学习

3、JSX 也是一种表达式

4、JSX 本质

5、元素渲染

6、将元素渲染进 DOM

7、组件和 Props

1、函数定义组件

2、类定义组件

3、组件渲染

4、组合组件

5、属性是只读的

8、State 与生命周期

1、在类中退出 state

2、生命周期

9、事件处理

10、条件渲染

1、应用变量来存储元素

2、应用 && 运算符进行渲染

3、应用三目运算符进行渲染

4、阻止整个组件的渲染

11、列表渲染与 keys

12、表单

1、受控组件

2、多个输出的解决办法

3、非受控组件

13、状态晋升

1、首先定义转换函数

2、定义组件

14、组合 vs 继承

1、蕴含关系

2、何时应用继承？