React初始记录（五）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

默认值

React渲染生命周期时，表单元素上的value将会覆盖DOM节点中的值。在非受控组件中，想让React赋予组件一个初始值，但不去控制后续的更新。可以指定一个defaultValue属性，而不是value。在一个组件已经挂载之后去更新defaultValue属性的值，不会造成DOM上值的任何更新。

  render() {
      return (
          <form onSubmit={this.handleSubmit}>
              <label>
                  姓名：
                  <input type="text" defaultValue="Jake" ref={this.input}></input>
              </label>
              <input type="submit" value="提交"></input>
          </form>
      )
  }

同样，<input type="checkbox">和<input type="radio">支持defaultChecked,<select>和<textarea>支持defaultValue。 文件输入

HTML中,input type="file"可以让用户选择一个或多个文件上传到服务器，或者通过使用File API进行操作。

在React中input type="file"始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制。

可以使用File API与文件进行交互。

class FileInput extends React.Component {

​ constructor(props){

​ super(props);

this.handleSubmit = this.handleSubmit.bind(this);

this.fileInput = React.createRef();

}

handleSubmit(event){

​ event.preventDefault();

​ alert(`xxx-${this.fileInput.current.files[0]}`);

}

render(){

​ return (

​ <form onSubmit={this.handleSubmit}>

​ <label>

​ 上传文件：

​ <input type="file" ref={this.fileInput} />

​ </label>

​ <br />

​ <button type="submit">提交</button>

​ </form>

)

}

}

const root = ReactDOM.createRoot(

​ document.getElementById('root')

)

root.render(<FileInput />);

状态提升

通常，多个组件需要反映相同的变化数据，建议将共享状态提升到最近的共同父组件中去。

function Grade(props){
•    if(props.g>=100){
•        return <p>优秀呀</p>
•    }
•    return <p>不错</p>
}
class App extends React.Component {
  constructor(props) {
•      super(props);
•      this.handleChange = this.handleChange.bind(this);
•      this.state = {f:''};
  }
  handleChange(event){
•    this.setState({f:event.target.value});
}
  render() {
•      const f = this.state.f;
•      return (
•         <fieldset>
•             <legend>请输入成绩</legend>
•             <input type="text" value={f} onChange={this.handleChange}/>
•             <Grade g={f}/>
•         </fieldset>
•      )
  }
}

组合

React有着强大的组合模式，实现组件间的复用，更推荐使用组合

包含关系

父组件想知道子组件的具体内容可以通过使用一个特殊的children prop来将子组件传递到渲染结果中。这样可以使得其他组件通过JSX嵌套，将任意组件作为子组件传递给它们。感觉有点像vue的插槽

function A(props){
    return (
    	<div>{props.children}</div>
    )
}
function B(){
    return(
    	<A>
    		<div>A</div>
    	</A>
    )
}

注意，如果需要预留多个位置，那么就不要使用children，而是将需要的内容传入props，并使用相应的prop

function A(props){
    reutrn(
    	<div className="all">
    		<div>
    			{props.a}
    		</div>
    		<div>
    			{props.b}
    		</div>
    	</div>
    )
}
function B(){
    reutrn(
    	<A>
    		a={
                <C/>
    		}
    		b={
                <D/>
    		}
    	</A>
    )
}

特例关系

有时需要将某些组件看作其他组件的特殊实例

在React中，通过组合来实现，特殊组件可以通过props定制并渲染一般组件

function A(props){
    return (
        <div>
            <div>
                {props.a}
            </div>
            <div>
                {props.b}
            </div>
        </div>
    )
}
function B(){
    reutrn(
        <A a="do something" b="do something" />
    )
}