React起步

保持不断学习的心态

react概念

React主入口库，包含组件内部私有属性定义,如：React.Component ReactDOM处理页面结构元素渲染方法，如：ReactDOM.render()

JSX 简介

描述：使用JSX可以很好的描述UI html结构；它是JavaScript的扩展，在{}可放置任何表达式。 对比看下使用JSX的不同

const name="admin"; // 使用语法定义UI元素 const info =( <h2 className="f24"> hi,{name} </h2> ); // 不使用JSX语法 const info_1 = React.createElement( 'h2', {className:'f24'}, 'hi,admin' ); ReactDOM.render( info, document.getElementById("app") );

特点：

可变量声明JSX、方法返回JSX、组件返回JSX方式获得JSX定义属性时采用小驼峰命名,如className、onClick使用()来定义复杂的UI结构,注意养成换行的习惯，可以避免遇到自动插入分号;陷阱标签内没有内容时可使用/>闭合标签，通常我们定义的组件使用就是自闭合所有动态输入的内容都会自动转字符串，防止XSS攻击

组件&props

描述：将页面的UI结构拆分一个个组件，然后在组合，维护方便、方便复用；它接收任意参数props

函数组件 正常的函数声明、接收一个props参数、返回一个JSX；

function Print(props){ return ( <div> <h3>hello,{props.name}</h3> </div> ); } // 使用ES6的class语法 class Print extends React.Components{ render(){ return ( <div> <h3>hello,{this.props.name}</h3> </div> ); } }

自定义标签 自定义渲染组件、只需要组件返回JSX格式的值。

const info = (<Print name="admin" />); ReactDOM.render( info, document.getElementById("app") );

注意：

使用组件时传入的属性attribute都会被转成单对象传递,通过props访问组件的名称必须大写,大小写区分是否自定义还是原生标签。

组件组合 简单理解，拆分的每个组件在组合起来；注意拆分的艺术，从复用性考虑是否值得拆分。

function DetailInfo(){ return ( <div> <h3>hello,{props.user.name}</h3> </div> ); } function Info(props){ return ( <div> <h2>welcome</h2> <DetailInfo user={props.info} /> <footer>{props.address}</footer> </div> ); }

react组件中的参数props不能被更改(强制)

使用class定义组件

描述：使用class来定义组件，才是react的重点了；数据的实时更新动态渲染都离不开它的自有属性state;当然函数可用来辅助，比如事件处理。 可以先去了解下ES6的语法

class Info extends React.Component{ constructor(props){ super(props); this.state={ // some attr name:"admin" } } render(){ return (<h2>hello,{this.state.name}</h2>); } }

想要试试更新name,直接更改this.state中name的值：

updateName(){ this.setState({ // react 内置更新state的方法 name:"Test" }); }

不能使用this.state.name="test"这种方式修改属性，无用不会更新；setState()是唯一的方法。

特点：

使用class声明、并继承React.Component必须包含一个render()方法props参数使用方式this.props拥有构造函数constructor,构造函数接收参数props;且构造函数中不许调用super(props)拥有一个内部私有属性this.state对象定义属性

state的使用理解

异步数据更新 this.state、this.props的值可能是异步更新获取的。setState()可接受一个函数作为参数，函数参数为state/props.

this.setState((state,props)=>({ detailInfo:state.name+"/"+props.age }));

数据向下流动 一个组件的this.state/this.props都是可以传递给它的子组件。子组件并不知道数据从何而来。

组件生命周期

componentDidMount() 挂载阶段，组件渲染DOM完毕后执行。

componentWillUnmount() 卸载阶段，

事件处理

事件定义

const btn = ({ <button onClick={addInfo}></button> });

特点：

需要传入的是事件处理函数，处理函数命名方式小驼峰式

使用理解

处理事件阻止默认行为时，必须显示调用e.preventDefault()

事件处理方法中需要调用组件内的属性，则需要显示绑定this

class Info extends React.Component{ constuctor(props){ super(props); this.state={ bool:true }; // 显示绑定this this.handleClick = this.handleClick.bind(this); } handleClick(){ this.setState(state=>({ bool:!state.bool })); } render(){ return ( <button onClick={handleClick}> {this.state.bool?"hello":"你好"} </button> ); } }

事件处理函数传递参数 (1)使用箭头函数时（可以解决this绑定问题，但如果该回调函数作为props参数传入子组件时出现性能问题）

<button onClick={(e)=>this.handleClick(user,e)}> {this.state.bool?"hello":"你好"} </button>

显示传递事件对象及更多参数

(2)使用bind()

<button onClick={this.handleClick.bind(this,user)}> {this.state.bool?"hello":"你好"} </button>

隐式传递了事件对象，还有一些其他参数。

条件渲染

描述：根据不同的条件需要展示不同的视图. 使用if判断处理。

function getForm(props){ const bool = props.isNewUser; if(bool){ return ({ <h3>oh,look</h3> }); } return ({ <h3>oh,...</h3> }); }

JSX内联条件渲染 使用&&书写表达式

const bool = true; const info = ( <div> {bool&& <h2> you have get some skills. </h2> } <p>some examples</p> </div> );

使用三目运算符

const info = ( <div> {bool?( <h2> you have get some skills. </h2> ):( <h2> you are heroic. </h2> )} <p>some examples</p> </div> );

通过返回null不会进行任何DOM渲染，不影响组件的生命周期。

列表&key

描述：一组数据循环渲染列表

使用JSX语法表达式，每个列表item都必须有key属性，在同一个列表必须保持唯一

const arr=[3,2,4,5]; const items = ( <ul> {arr.map((v,k)=> <li key={k}> {v} </li> )} </ul> );

一下几种方式设置key值：

如果元素的值唯一，则可以设置列表属性key的值为v.toString()使用元素的索引值k,对于数组不推荐使用索引，数组的索引值会变动如果元素值是一个提供属性v.id作为key的值。

列表元素渲染时考虑提取组件。

表单

在React中使用受控组件控制表单数据。结合实现以下两个行为：

表单元素自身行为、用户输入改变表单值。将属性值控制在this.state中，设置更新。

input/textarea/select

value属性定义值监听事件onChangeselect默认选择不依赖selected属性。

---

class InputForm extends React.Component{ constructor(props){ super(props); this.state = { value:"hello", selVal:"2" } this.handleInput= this.handleInput.bind(this); this.handleSelect = this.handleSelect.bind(this); } handleInput(e){ this.setState({value:e.target.value}); } handleSelect(e){ this.setState({selVal:e.target.value}); } render(){ return ( <form> <input type="text" value={this.state.value} onChange={this.handleInput} /> <textarea value={this.state.value} onChange={this.handleInput} /> <select value={this.state.value} onChange={this.handleSelect}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </form> ); }; }

少量表单元素时，可定义多个事件处理函数。有多个表单元素就很繁琐了，给定表单元素name属性，再根据 e.target.name区分处理。

官方推荐使用Fromik处理表单数据。 当然还包括非受控组件，比如文件上传。

状态提升

描述：多个组件中需要共享同一分数据，则需要在他们共同的父组件中进行管理； 分为两步：

属性传递到相关子组件。传递属性处理函数到各个子组件。

---

class Child extends React.Component{ constructor(props){ super(props); this.handlClick = this.handlClick.bind(this); } handlClick(){ this.props.onUpdateChild(e.target.value); } render(){ return ( <input value={this.props.name} onChange={this.handlClick} /> ); } } class Parent extends React.Component{ constructor(props){ super(props); this.state={ name:"admin" } this.onUpdateChild = this.onUpdateChild.bind(this); } onUpdateChild(val){ this.setState({name:val}); } render(){ return ( <div> <Child flag="one" name={this.state.name} onUpdateChild={this.onUpdateChild}/> <Child flag="two" name={this.state.name} onUpdateChild={this.onUpdateChild}/> </div> ); } }

  实例中表明父组件中维护一个数据中心state以及属性处理方法。在调用子组件将属性相关的属性传入子组件；传入子组件的属性通过props访问。

同一个组件多次渲染时，需要自定义标识符,示例中flag，标识符要能表明组件的意义。

组合&继承

组件化开发。理解slot插槽的概念,通过props访问。 1、通过props.children获取内容

function InputForm(props){ return ( <div> <label>name:</label> {props.children} </div> ); } function App(){ return ( <InputForm> <input value="admin" /> </InputForm> ); }

2、通过自定义slot名

function InputForm(props){ return ( <div> <label>name:</label> {props.inputTest} </div> ); } function App(){ return ( <InputForm inputTest={ <input value="admin" /> } /> ); }

官方不推荐继承 组件化开发，深层组件复用;理解props的使用，

实例代码未经过测试，仅作为概念理解示例