React的组件

React的组件化思想尤为明显,一切皆组件,觉着比Vue的组件化思想更加凸显。

const PacketBG = (props) =>(
     <div className="packet-bg">
        <div className="packet-wrap">
            <p>{props.name}</p>
            <div className="packet-txt">{props.wishTxt}</div>
            <div className="open-packet" onClick={props.onClick}></div>
        </div>
     </div>
)
PacketBG.defaultProps = {
    name:'Jack',
    wishTxt:'阖家欢乐,万事如意'
}

React组件也可以实现数据和模板分离,可以写defaultProps,也可以通过使用组件时候给props的属性赋值。

组件之间的互相通讯是通过props来传递的,这个很重要!

State和Props组合使用:可以在父组件中设置state,然后通过子组件的props将其传递到子组件上。

React的数据单向流,自顶向下,从父组件到子组件的流向。

组件的事件处理:

事件绑定采用驼峰写法 : <div onClick={props.onClick}>知道了</div>

而且不能使用返回return false来阻止默认行为,必须使用preventDefault。

1,组件列表的实现:

const ListItem = (props)=>(
    <li>{props.value}</li>
)
const ComponetOne = (props)=>{
    const numbers = props.numbers;
    return (
        <ul>
            {numbers.map((n,index)=>(
                <ListItem key={index} value={n}/>
            ))}
        </ul>
    )
}

组件列表必须有key,在使用时候:<ComponetOne numbers={this.state.numbers}/>

2,React组件的API:

setState(nextState,callback) 

 //setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
 this.setState({numbers:[7,8,9]},()=>alert(1))

 nextState会合并到当前的state当中,并且重新渲染组件,并且还有回调函数。

replaceState(nextState,callback)  //替换当前的state

setProps(nextProps,callback)  //props是组件的数据流,总是从父组件流向子组件,setProps触发子组件重新渲染。

replaceProps(nextPrps,callback)  //替换当前props

forceUpdate(callback)   //强制更新

注意:

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

setState的状态更新可能是异步的,所以需要接受一个函数,而不是对象。状态的更新合并是浅合并,类似:Object.assign();

3,props是只读的,意思是说子组件从父组件中传过来的props变量,在子组件内部不能修改,子组件对于从父组件上流传递下来的数据没有控制权。但是可以通过类似input的onChange事件属性,告知父组件,让父组件帮忙修改!

比如:我们要改变一个子组件的状态,若子组件本身具有state状态,那么内部改变其状态可以使用this.setState来更新状态,而若是从上流父组件下面传递来的props值,那么更新其状态,则需要this.props.onHandleChange()事件,告知上流父组件,让其帮忙更新【通常是父组件内部的state】。

React的状态提升:几个组件共用状态数据的时候,可以将共享的数据提升至他们最近的父组件当中统一管理,就达到了状态共享。

4,react组件的组合使用: 

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

 该组件在使用时,props.children类似一个卡槽,JSX标签内的所有内容通过children传入FancyBorder中。如果需要多个入口的话,比如{props.content1},{props.content2},content1和content2可以是两个不同的组件,这样子就构成了组合组件。

React不推荐使用继承,而推荐使用组合组件!

5,React项目的理念思路:

理想情况下,根据“单一功能原则”,一个组件应该只做一件事情。一般构建UI思路自顶向下,也就是先整体后部分,在大型项目中,也可以先部分再整体。

6,JSX组件也可以使用点表示法:

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

MyComponents里面有多个属性,属性值都是JSX组件,父组件使用中可以使用点表示法。

7,组件命名必须大写字母开头,如果是小写开头的标签会被认为是HTML原生标签,JSX的标签名可以是大写开头的变量,这样子的话,组件就是动态的了!

8,React组件的属性,如果没有给属性值,默认是true,下面两个JSX的使用是等价的:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

9,组件的展开属性:

如果props的属性比较多,可以使用对象的展开符...来传递

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

10,Javascript中针对类型检查的库有Flow,TypeScript等,react自v15.5开始,使用prop-types库来进行类型检查。

Flow是Facebook开发的,经常和React一起使用,是专门针对javascript代码的静态类型检查器,可以使用npm进行添加。create-react-app脚手架默认是剥离Flow的。

TypeScript是由微软开发的,可以使用npm进行添加依赖。

11 ,react的ref的用法,目前字符串已废弃,全新的是React.createRef(),是React16.3提供的。

最早的时候在dom上面this.refs[‘inputRef’]来访问Dom,而最新的reactApi推荐通过ref的current属性来拿到dom节点。赋值:this.myRef = React.createRef();然后将ref={this.myRef}挂载dom标签上,访问时通过this.myRef.current来确定dom元素。

React.createRef()方法接收底层DOM元素作为current属性以创建ref。

不能在函数式组件上使用ref,因为它们没有实例!!!想要使用ref,生命周期方法,或者state,必须使用class组件!

回调Refs:在实例属性中存储对DOM节点的引用!

注意:String版本的ref已被移除,如果以前还在使用,建议用回调函数方式代替。

12,react组件是react的核心所在,那么react元素是由JSX创建,这个是必须知道的,而渲染则是通过生命周期函数render(),跟浏览器的交互方法,则会放置在componentDidMount()的生命周期方法中或其他生命周期中。

13,一般网络请求都会放在componentDidMount()中,然后在componentWillUnmount()方法中解除定时器,取消网络请求,清理订阅等。componentDidUpdate()是组件更新时候调用,也就是state更新时候会触发,如果state没有改变,那么将不会调用该函数。

在react中发送Ajax请求,可以搭配Axios,jQuery AJAX,浏览器内置的window.fetch都可以。

 

 

 

 

 

 

 

 

 

 

 

 

 

【未完待续】

新年flag6——

 

 

 

posted @ 2019-02-14 16:43  tangjiao_Miya  阅读(207)  评论(0编辑  收藏  举报