React:细节后续 基础指南(下)

细节

• 输入造成的错误。

  当想把return 的 GuestGreeting 和 UserGreeting 互换的时候，手动输入两个函数而不是复制粘贴。手动输入把Guest改为User，User改为Guest，当第一个改完，第二个没改完的时候，第二个函数是 xxGreeting，工具会认为是Greeting，因为 Function函数定义的是 Greeting，自己嵌套调用自己会造成死循环。

  function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <GuestGreeting />;
  }
  return <UserGreeting />;
  }

• 整体思路 1定义了函数的方法和 h 和 button

  2 定义了一些类和渲染render
  3 执行class 类的结构体contract，showwarning=true
  正确的时候，render三目运算符执行的是Hide，由于三目运算符里面嵌套了showwarning,showarning返回上面的 warningBanner.
  4 warningBanner执行function 的if ，由于点击以后 Hide变成了 show，这时候 props warn变成了 ！ 点击之前 是 true

function WarningBanner(props) {if (!props.warn) {return null;}
    return (<div className="warning">Warning!</div>);}
class Page extends React.Component {
  constructor(props) {super(props);this.state = {showWarning: true}
 //如果改为false，会先展示showthis.handleToggleClick = this.handleToggleClick.bind(this);
      }handleToggleClick() {this.setState(prevState => ({
      showWarning: !prevState.showWarning}));}
  render() {return (<div><WarningBanner warn={this.state.showWarning} />
    <button onClick={this.handleToggleClick}>{this.state.showWarning ? 'Hide' : 'Show'}
     </button></div>
// 如果是 ？show：hide  会先显示 show 和 warning);}}
ReactDOM.render(<Page />,document.getElementById('root'));

body {background: #BBFFBB;}
* {font-family: sans-serif;
  margin: 0;}
button {height: 40px;
  width: 200px;}
.warning {background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;
  font-size: 14pt;
  color: white;}

• 钥匙帮助反应识别哪些项目已经改变,添加或删除。钥匙要给数组元素内的元素一个稳定的身份:

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

选择一个最好方法主要是使用一个字符串,唯一地标识一个列表项在其兄弟姐妹。从你的数据通常可以使用id作为键

const todoItems = todos.map((todo) =><li key={todo.id}>{todo.text}</li>);

当你没有稳定的IDs呈现物品,你可以使用项指数作为一个关键作为最后的手段

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

• numberOfGuests 方法。//如果把初始值2改成undefined 会有一个默认值。本方法默认值是0

  undefined的时候会有一个“警告:一个组件正在改变一个不受控制的输入类型% s的控制。输入元素不应该从控制转向控制(反之亦然)。使用受控或不受控制的输入元素之间决定组件的生命周期。更多信息:https://fb。我/ react-controlled-components % s”“数”“

  class Reservation extends React.Component {
    constructor(props){super(props);
    this.state = {isGoing: true,numberOfGuests: 2};
    //如果把2改成undefined 会有一个默认值。本方法默认值是0,这时候出现“警告:
    //一个组件正在改变一个不受控制的输入类型% s的控制。输入元素不应该从控制转向控制(反之亦然)。
    //使用受控或不受控制的输入元素之间决定组件的生命周期。
    this.handleInputChange = this.handleInputChange.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});}
    render() {
    return (<form><label>Is going:<input name="isGoing"type="checkbox"
    checked={this.state.isGoing}  onChange={this.handleInputChange} /></label>
    <br /><label>Number of guests:<input  name="numberOfGuests"
     type="number"  value={this.state.numberOfGuests}
     onChange={this.handleInputChange} /></label></form>);}}
  ReactDOM.render(<Reservation />,document.getElementById('root'));

编辑的时候发生的事情：
1、react调用在dom上指定为onchange的函数。在我们的例子中，这是温度输入组件中的handlechange方法。
2、temperatureInput组件中的handleChange方法使用新的所需值调用此.props.ontemperatureChange（）。它的道具，包括温度变化，是由它的父组件计算器提供的。
3、在先前渲染时，计算器指定摄氏温度输入的温度范围是计算器的handlecelsiuschange方法，而华氏温度输入的温度范围是计算器的handle华氏温度范围方法。所以根据我们编辑的输入调用这两个计算器方法中的任何一个。
在这些方法中，计算器组件通过使用新的输入值和刚刚编辑的输入的当前比例调用这个.setState（），要求react重新呈现自己。
4、react调用计算器组件的呈现方法来了解UI的外观。两个输入的值都是根据当前温度和活动刻度重新计算的。这里进行温度转换。
5、react使用计算器指定的新属性调用各个温度输入组件的渲染方法。它了解用户界面应该是什么样子。
react调用boilingjustion组件的render方法，将摄氏温度作为其道具传递。
react dom用沸腾的结论更新dom并匹配所需的输入值。我们刚刚编辑的输入接收其当前值，另一个输入在转换后更新为温度。
每次更新都要经过相同的步骤，以便输入保持同步。

const scaleNames = {c: 'Celsius',f: 'Fahrenheit'};
function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;}
function toFahrenheit(celsius) {return (celsius * 9 / 5) + 32;}
function tryConvert(temperature, convert) {const input = parseFloat(temperature);
  if (Number.isNaN(input)) {return '';}
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();}
function BoilingVerdict(props) {if (props.celsius >= 100) {
    return <p>The water would boil.</p>;}return <p>The water would not boil.</p>;}
    class TemperatureInput extends React.Component {
    constructor(props) {
    super(props);this.handleChange = this.handleChange.bind(this);}
    handleChange(e) {this.props.onTemperatureChange(e.target.value);}
    render(){const temperature = this.props.temperature;const scale = this.props.scale;
    return(<fieldset><legend>Enter temperature in {scaleNames[scale]}:</legend>
    <input value={temperature} onChange={this.handleChange} /></fieldset>);}
    }
class Calculator extends React.Component {
    constructor(props) {super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};}
    handleCelsiusChange(temperature) {this.setState({scale: 'c', temperature});}
    handleFahrenheitChange(temperature) {this.setState({scale: 'f', temperature});}
    render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    return(<div><TemperatureInput scale="c" temperature={celsius}
     onTemperatureChange={this.handleCelsiusChange} /><TemperatureInput scale="f"
     temperature={fahrenheit}onTemperatureChange={this.handleFahrenheitChange} />
     <BoilingVerdict celsius={parseFloat(celsius)} /></div>);}
     }
ReactDOM.render(<Calculator />, document.getElementById('root'));

• 经常向用户显示JSON数据模型，因此会发现，如果模型构建正确，那么您的UI（以及组件结构）将很好地映射。这是因为用户界面和数据模型倾向于遵循相同的信息体系结构，这意味着将用户界面分离为组件的工作通常是微不足道的。只需将其分解为只代表数据模型一部分的组件即可。

Composition组合vs Inheritance继承

经常反应的问题，这些问题涉及到继承，并展示如何用组合来解决它们。
比如Containment遏制。有些组件不了解他们的孩子。这对于侧边栏或对话框等表示通用“框”的组件尤其常见。
建议这些组件使用特殊的children属性将children元素直接传递到其输出中：这允许其他组件通过嵌套JSX将任意子级传递给它们：

function FancyBorder(props) {
  return (<div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}</div>);}
function WelcomeDialog() {
  return (<FancyBorder color="blue"><h1 className="Dialog-title">
      Welcome</h1><p className="Dialog-message">Thank you for visiting our spacecraft!
      </p></FancyBorder>);}
ReactDOM.render(<WelcomeDialog />,document.getElementById('root'));

.FancyBorder {padding: 10px 10px;
border: 10px solid;}
.FancyBorder-blue {border-color: blue;}
.Dialog-title {margin: 0;font-family: sans-serif;}
.Dialog-message {font-size: larger;}

jsx标记中的任何内容都作为子属性传递到fancyborder组件中。由于fancyborder在

function Contacts() {return <div className="Contacts" />;}
function Chat() {return <div className="Chat" />;}
function SplitPane(props) {
  return (<div className="SplitPane"><div className="SplitPane-left">{props.left}</div>
   <div className="SplitPane-right">{props.right}</div></div>);}
function App() {
  return (<SplitPane left={<Contacts />}right={ <Chat />} />);}
ReactDOM.render(<App />,document.getElementById('root'));

html, body, #root {width: 100%;
  height: 100%;}
.SplitPane {width: 100%;
height: 100%;}
.SplitPane-left {float: left;
  width: 30%;
  height: 100%;}
.SplitPane-right {float: left;
  width: 70%;
  height: 100%;}
.Contacts {width: 100%;
  height: 100%; 
  background: lightblue;}
.Chat {width: 100%;
  height: 100%; 
  background: pink;}

function FancyBorder(props) {
  return (<div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}</div>);}
function Dialog(props) {
  return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1>
    <p className="Dialog-message">{props.message}</p></FancyBorder>);}
function WelcomeDialog() {
  return(<Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />);}
ReactDOM.render(<WelcomeDialog />,document.getElementById('root'));

.FancyBorder {padding: 10px 10px;
  border: 10px solid;}
.FancyBorder-blue {border-color: blue;}
.Dialog-title {margin: 0;
  font-family: sans-serif;}
.Dialog-message {font-size: larger;}

function FancyBorder(props) {
  return (<div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}</div>);}
function Dialog(props) {
  return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1>
    <p className="Dialog-message">{props.message}</p>{props.children}</FancyBorder>);}
class SignUpDialog extends React.Component {
  constructor(props) {super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''}; }
  render() {
    return (<Dialog title="Mars Exploration Program" message="How should we refer to you?">
        <input value={this.state.login} onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>Sign Me Up!</button></Dialog>);}
  handleChange(e) { this.setState({login: e.target.value});}
  handleSignUp() { alert(`Welcome aboard, ${this.state.login}!`);}}
ReactDOM.render(<SignUpDialog />,document.getElementById('root'));

.FancyBorder {padding: 10px 10px;
  border: 10px solid;}
.FancyBorder-blue {border-color: blue;}
.Dialog-title { margin: 0;
   font-family: sans-serif;}
.Dialog-message {font-size: larger;}