Java架构师成长直通车（40周完结无密）

1342

收藏 2021-09-11

### Java架构师成长直通车（40周完结无密）
链接：https://pan.baidu.com/s/19Se0O0QtR7o1T_ASlOVfug
提取码：9u01
--来自百度网盘超级会员V4的分享

引入准绳：
<head>  </script>  </script>  </script></head>
body区域
<div id='example'></div><script type='text/bable'>  //**our codes goes here!</script>
实践上线用babel停止转换
bable src --out-dir build
ReactDOM.render()示例：
ReactDOM.render( <h1>hello world!</h1>, document.getElementById('example');)
JSX语法var names =['Alice','Emily','Kate'];ReactDOM.render(  <div>  {    names.map(function(name){       return <div>Hello,{name}!</div> })  }  </div>,  document.getElementById('example'));
JSX允许在模板中直接插入JavaScript变量
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2> ];ReactDOM.render(  <div>{arr}</div>,  document.getElementById('example'));
组件React.createClass用于生成一个组件类
var HelloMessage = React.creatClass({ render:function(){ return <h1>Hello {this.props.name}</h1>; }});ReactDOM.render(  <HelloMessage name='john' />,  document.getElementById('example'));

组件的第一个字母必需大写
组件只能包含一个顶层标签
class属性需求写成className

this.props.childrenthis.props.children 表示组件一切的子节点
var NoteList = React.createClass({ render:function(){    return(    <ol>    {       React.Children.map(this.props.children,function(child){          return <li>{child}</li>          })       }       </ol>    ); }});ReactDOM.render(  <NoteList> <span>hello</span> <span>World</span>  </NoteList>,  document.body);
运用React.Children.map来遍历子节点，不用担忧this.props.children的数据类型
PropTypes考证实例的属性能否契合请求
var MyTitle = react.createClass({ propTypes:{    title:React.PropTypes.string.isRequired,    }, render:function(){    return <h1>{this.props.title}</h1>    }});var data = 123;ReactDOM.render(  <MyTitle title={data} />,  document.body );
getDefaultProps能够用来设置组件属性的默许值
getDefaultProps:function(){ return {    title: 'Hello World'    };  }
获取真实的DOM节点有时需求从组件中获取真实的DOM节点，需求用到ref属性。
var MyComponet = React.CreatClass({ handleClick:function(){    this.refs.myTextInput.focus(); }, render:function(){    return (    <div>       <input type='text' ref='myTextInput' />       <input type='button' value ='Focus the text input'       onClick={this.handleClick} />       </div>    ); }});ReactDOM.render(  <MyComponet />,  document.getElementById('example'));
指定click事情回调函数，确保DOM真实渲染后触发，除此还支持KeyDown等事情
this.state组件视为状态机，用户互动，状态变化，重新渲染UI。
var LikeButton = React.CreatClass({ getInitialState:function(){       return {liked:false}; }, handleClick:function(event){       this.setState({liked: !this.state.liked}); }, render:function(){       var text = this.state.liked? 'like':'haven\'t liked';       return(          <p onClicked={this.handleClick}>             You {text} this. Click to toggle.          </p>       ); }});ReactDom.render( <LikeButton />, document.body);
this.props表示一旦定义不再更改的属性，this.state表示随用户互动产生变化的特性。
表单var Input = React.createClass({ getInitialState:function(){       return {value:'Hello!'}; }, handleChange:function(event){       this.setState({value:event.target.value}); }, render:function(){       var value = this.state.value;       return (          <div>             <input type='text' value = {value}             onChange = {this.handleChange} />             <p>{value}</p>          </div>       ); }});ReactDOM.render(<Input />,document.body);
这里获得输入框的值没有运用this.props.value,选用了event.target.value。
组件的生命周期

Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting:已移除真实DOM