You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<ahref="#"onclick="console.log('The link was clicked.'); return false">
Click me
</a>
React中:
functionActionLink(){functionhandleClick(e){e.preventDefault();console.log('The link was clicked.');}return(<ahref="#"onClick={handleClick}> Click me </a>);}
2. Conditional Rendering
根据不同条件,渲染不同的组件
如果组件的返回值为null,则不渲染该组件
functionUserGreeting(props){return<h1>Welcome back!</h1>;}functionGuestGreeting(props){return<h1>Please sign up.</h1>;}functionGreeting(props){constisLoggedIn=props.isLoggedIn;if(isLoggedIn){return<UserGreeting/>;}return<GuestGreeting/>;}ReactDOM.render(// Try changing to isLoggedIn={true}:<GreetingisLoggedIn={false}/>,document.getElementById('root'));
An input form element whose value is controlled by React in this way is called a “controlled component”
classNameFormextendsReact.Component{constructor(props){super(props);this.state={value: ''};this.handleChange=this.handleChange.bind(this);this.handleSubmit=this.handleSubmit.bind(this);}handleChange(event){this.setState({value: event.target.value});}handleSubmit(event){alert('A name was submitted: '+this.state.value);event.preventDefault();}render(){return(<formonSubmit={this.handleSubmit}><label>
Name:
<inputtype="text"value={this.state.value}onChange={this.handleChange}/></label><inputtype="submit"value="Submit"/></form>);}}
There should be a single “source of truth” for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.
Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
React的组件的composition和props组合起来用,而不是用继承,如下demo:
functionDialog(props){return(<FancyBordercolor="blue"><h1className="Dialog-title">{props.title}</h1><pclassName="Dialog-message">{props.message}</p></FancyBorder>);}functionWelcomeDialog(){return(<Dialogtitle="Welcome"message="Thank you for visiting our spacecraft!"/>);}
7. Thinking In React
React change the way that Web apps should be build.
UI -> Web apps 四步:
Break The UI Into A Component Hierarchy
将UI结构拆解成组件结构
Build A Static Version in React
It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.
这个阶段用不到state
Identify The Minimal (but complete) Representation Of UI State
找到state,即交互中哪些数据会改变
Identify Where Your State Should Live
将state放到合适的组件中维护
Add Inverse Data Flow
如果有反向数据流,即子组件影响父组件内的状态,传回调函数给子组件去影响父组件的值
The text was updated successfully, but these errors were encountered:
1. Handling Events
Html
中处理添加事件:React
中:2. Conditional Rendering
根据不同条件,渲染不同的组件
如果组件的返回值为null,则不渲染该组件
3. Lists and Keys
React
中渲染列表,简单粗暴:That it is! cool!
注意遍历时要给
element
加key
属性,否则控制台会报警告。4. Forms
input
,textarea
,select
都是以上述的方式被React
控制的:value={this.state,value} onChange={this.handleChange}
5. Lifting State Up
将多个组件共享的数据提升至 离这些组件最近的共同父组件中进行管理。
官网demo是个非常好的例子:
6. Composition vs Inheritance
React
的组件的composition
和props
组合起来用,而不是用继承,如下demo:7. Thinking In React
React change the way that Web apps should be build.
UI
->Web apps
四步:Break The UI Into A Component Hierarchy
将UI结构拆解成组件结构
Build A Static Version in React
这个阶段用不到
state
Identify The Minimal (but complete) Representation Of UI State
找到
state
,即交互中哪些数据会改变Identify Where Your State Should Live
将
state
放到合适的组件中维护Add Inverse Data Flow
如果有反向数据流,即子组件影响父组件内的状态,传回调函数给子组件去影响父组件的值
The text was updated successfully, but these errors were encountered: